Documentation

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

Standard

Description

Purpose: The standard button is the default button to be used in ILIAS. If there is no good reason using another button instance in ILIAS, this is the one that should be used.
Composition: The standard button uses the primary color as background.
Effect: If the loading animation is activated, the button shows a spinner wheel on-click and automatically switches to a deactivated state.

Rules

Usage

Standard buttons MUST be used if there is no good reason using another instance.
The loading animation SHOULD be activated if the Buttons starts any background process (e.g. ajax calls) without any other immediate feedback for the user. After the process finished, the button MUST be removed from/replaced in the DOM.

Ordering

The most important standard button SHOULD be first in reading direction if there are several buttons.
In the toolbar and in forms special regulations for the ordering of the buttons MAY apply.

Responsiveness

The most important standard button in multi-action bars MUST be sticky (stay visible on small screens).

Accessibility

Standard buttons MAY define aria-label attribute. Use it in cases where a text label is not visible on the screen or when the label does not provide enough information about the action.
Some Buttons can be stateful; when engaged, the state MUST be reflected in the "aria-pressed"-, respectively the "aria-checked"-attribute. If the Button is not stateful (which is the default), the aria-attribute SHOULD be omitted.

Example 1: Base

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

Example 2: Engaged

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

Example 3: Unavailable action

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Button\Standard;
 
/**
 * 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()->standard('Unavailable', '#')->withUnavailableAction();
 
    return $renderer->render([$button]);
}

Example 4: With js binding

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Button\Standard;
 
function with_js_binding()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    return $renderer->render(
        $f->button()->standard("Goto ILIAS", "#")
            ->withOnLoadCode(function ($id) {
                return
                    "$(\"#$id\").click(function() { alert(\"Clicked: $id\"); return false;});";
            })
    );
}

Example 5: With load anim

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Button\Standard;
 
/**
 * In this example we create a button that ships with the on load animation on click.
 * Note that if the button will trigger a page-reload as soon as the work is done,
 * No additional magic is needed. However, in Async scenario, one can make use of the
 * il.UI.button interface containing the functions activateLoadingAnimation and
 * deactivateLoadingAnimation as shown bellow.
 */
function with_load_anim()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    return $renderer->render(
        //Create a button with the LoadingAnimation on click and some additional JS-Magic.
        $f->button()->standard("Do Something", "")
            ->withLoadingAnimationOnClick(true)
            ->withOnLoadCode(function ($id) {
                return
                    "$('#$id').click(function(e) {
							$('#$id').html('Working...');
							setInterval(
								function(){
									$('#$id').html('Done');
									il.UI.button.deactivateLoadingAnimation('$id');
								}
							,3000);
					});";
            })
    );
}

Example 6: With tooltip

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

Relations

Parents

UIComponent
Button