Documentation

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

Shy

Description

Purpose: Shy Items are used to list more decent items which don't acquire much space.
Composition: A Shy Item contains a title and optional a description, a close action, properties (name/value), an icon as a lead.

Rules

Interaction

Clicking on the Close Button MUST remove the Shy Item permanently.

Accessibility

All interactions offered by a Shy Item MUST be accessible by only using the keyboard.

Example 1: Base

Test shy Item

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Item\Shy;
 
function base()
{
    global $DIC;
 
    return $DIC->ui()->renderer()->render(
        $DIC->ui()->factory()->item()->shy('Test shy Item')
    );
}

Example 2: With close

Test shy Item

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Item\Shy;
 
function with_close()
{
    global $DIC;
 
    return $DIC->ui()->renderer()->render(
        $DIC->ui()->factory()->item()->shy('Test shy Item')->withClose(
            $DIC->ui()->factory()->button()->close()
        )
    );
}

Example 3: With description

Test shy Item

This is a test shy.

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Item\Shy;
 
function with_description()
{
    global $DIC;
 
    return $DIC->ui()->renderer()->render(
        $DIC->ui()->factory()->item()->shy('Test shy Item')->withDescription('This is a test shy.')
    );
}

Example 4: With lead icon

Test shy Item

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Item\Shy;
 
use ILIAS\UI\Component\Symbol\Icon\Standard;
 
function with_lead_icon()
{
    global $DIC;
 
    return $DIC->ui()->renderer()->render(
        $DIC->ui()->factory()->item()->shy('Test shy Item')->withLeadIcon(
            $DIC->ui()->factory()->symbol()->icon()->standard(Standard::GRP, 'conversation')
        )
    );
}

Example 5: With long description

Test shy Item

This is a test shy of the root user in the current time. This is a little bit longer than the usual to test its visual presentation when the content exceed a minor amount of chars to see if this is still presented properly. This may affect its presentation inside a mobile or restricted view therefore the presentation of a long text is necessary to test within this example to show its responsivity above all views and to show the using developer, who is accessing this example for exact those information if the component can be used for his target purpose.

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Item\Shy;
 
function with_long_description()
{
    global $DIC;
 
    return $DIC->ui()->renderer()->render(
        $DIC->ui()->factory()->item()->shy('Test shy Item')->withDescription(
            'This is a test shy of the root user in the current time. This is a little bit longer than
            the usual to test its visual presentation when the content exceed a minor amount of chars to see if this
            is still presented properly. This may affect its presentation inside a mobile or restricted view therefore
            the presentation of a long text is necessary to test within this example to show its responsivity above all
            views and to show the using developer, who is accessing this example for exact those information if the
            component can be used for his target purpose.'
        )
    );
}

Example 6: With properties

Test shy Item

Property

Value

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Item\Shy;
 
function with_properties()
{
    global $DIC;
 
    return $DIC->ui()->renderer()->render(
        $DIC->ui()->factory()->item()->shy('Test shy Item')->withProperties(['Property' => 'Value'])
    );
}

Relations

Parents

UIComponent
Item