Documentation

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

Key Value

Description

Purpose: Key-Value Interruptive items represent objects that can be identified, either in general or in context, by a characteristic value, or for which a characteristic value paired to the object's name or title helps distinguish it from other objects.
Composition: A Key-Value Interruptive item is composed of an Id and a Key-Value pair.

Rivals

Standard Interruptive Item: Standard Interruptive items should be used over Key-Value items when the characteristic value is potentially verbose (e.g. a description or byline). For items representing ILIAS objects, standard items MUST be used.

Rules

Usage

A key-value interruptive item MUST have a key and a value.
If an Interruptive modal displays multiple key-value items having the same key, the value MUST be used in order to distinguish these objects from each other.

Accessibility

Key-Value pairs MUST be rendered as descriptive listings.

Example 1: Base

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Modal\InterruptiveItem\KeyValue;
 
function base()
{
    global $DIC;
    $factory = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $message = 'Here you see some key-value interruptive items:';
    $modal = $factory->modal()->interruptive('My Title', $message, "#")
                     ->withAffectedItems(array(
                         $factory->modal()->interruptiveItem()->keyValue(
                             '10',
                             'First Key',
                             'first value'
                         ),
                         $factory->modal()->interruptiveItem()->keyValue(
                             '20',
                             'Second Key',
                             'second value'
                         ),
                         $factory->modal()->interruptiveItem()->keyValue(
                             '30',
                             'Third Key',
                             'really really long value, much much longer than any value needs to be, that should be cut off at some point'
                         )
                     ));
    $button = $factory->button()->standard('Show some key-value interruptive Items', '')
                      ->withOnClick($modal->getShowSignal());
 
 
    return $renderer->render([$button, $modal]);
}

Relations

Parents

UIComponent
Modal
Interruptive Item