UPDATE-RATE

Die Test-Installation wird aktuell zwischen 8:00 und 18:00 Uhr stündlich zur vollen Stunde aktualisiert.
Alles neu macht der Mai

ILIAS 9 ist da! Alle Infos zu den Highlights der neuen Version gibt es hier!

Documentation

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

Standard

Description

Purpose
This is a standard item to be used in lists or similar contexts.
Composition
A list item consists of a title and the following optional elements: description, main action button or main action link, action drop down, audio player element, properties (name/value), a text, image, icon or avatar lead, a progress meter chart and a color. Property values MAY be interactive by using a Shy Buttons or a Link.

Rules

Accessibility
  1. Information MUST NOT be provided by color alone. The same information could be presented, e.g. in a property to enable screen reader access.

Example 1: Base

Item Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
OriginCourse Title 1
Last Update24.11.2011
LocationRoom 123, Main Street 44, 3012 Bern 
<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Item\Standard;
 
/**
 * Base
 */
function base()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
    $actions = $f->dropdown()->standard(array(
        $f->button()->shy("ILIAS", "https://www.ilias.de"),
        $f->button()->shy("GitHub", "https://www.github.com")
    ));
    $app_item = $f->item()->standard("Item Title")
        ->withActions($actions)
        ->withProperties(array(
            "Origin" => "Course Title 1",
            "Last Update" => "24.11.2011",
            "Location" => "Room 123, Main Street 44, 3012 Bern"))
        ->withDescription("Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.");
    return $renderer->render($app_item);
}
 

Example 2: With audio player

Thumbnail Example

ILIAS Audio

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Length00:00:26 
<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Item\Standard;
 
/**
 * With audio player
 */
function with_audio_player(): string
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $actions = $f->dropdown()->standard(array(
        $f->button()->shy("ILIAS", "https://www.ilias.de"),
        $f->button()->shy("GitHub", "https://www.github.com")
    ));
 
    $audio = $f->player()->audio("https://files.ilias.de/ILIAS-Audio.mp3", "");
 
    $app_item = $f->item()->standard("ILIAS Audio")
        ->withActions($actions)
        ->withAudioPlayer($audio)
        ->withProperties(array(
            "Length" => "00:00:26"))
        ->withDescription("Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.")
        ->withLeadImage($f->image()->responsive(
            "src/UI/examples/Image/HeaderIconLarge.svg",
            "Thumbnail Example"
        ));
    return $renderer->render($app_item);
}
 

Example 3: With image and progress

Thumbnail Example

Item Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
75 % 
<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Item\Standard;
 
/**
 * With progress meter chart
 */
function with_image_and_progress()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
    $chart = $f->chart()->progressMeter()->standard(100, 75);
    $app_item = $f->item()->standard("Item Title")
                  ->withDescription("Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.")
                  ->withProgress($chart)
                  ->withLeadImage($f->image()->responsive(
                      "src/UI/examples/Image/HeaderIconLarge.svg",
                      "Thumbnail Example"
                  ));
    return $renderer->render($app_item);
}
 

Example 4: With lead avatar

mm

Max Mustermann

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Last Login24.11.2011
LocationHamburg
User Avatar

Erika Mustermann

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Last Login3.12.2018
LocationBerlin 
<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Item\Standard;
 
/**
 * With Lead Avatar
 */
function with_lead_avatar()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
    $actions = $f->dropdown()->standard(array(
        $f->button()->shy("ILIAS", "https://www.ilias.de"),
        $f->button()->shy("GitHub", "https://www.github.com")
    ));
    $app_item1 = $f->item()->standard("Max Mustermann")
        ->withActions($actions)
        ->withProperties(array(
            "Last Login" => "24.11.2011",
            "Location" => "Hamburg"))
        ->withDescription("Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.")
        ->withLeadAvatar($f->symbol()->avatar()->letter('mm'));
    $app_item2 = $f->item()->standard("Erika Mustermann")
        ->withActions($actions)
        ->withProperties(array(
            "Last Login" => "3.12.2018",
            "Location" => "Berlin"))
        ->withDescription("Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.")
        ->withLeadAvatar($f->symbol()->avatar()->picture('./templates/default/images/placeholder/no_photo_xsmall.jpg', 'demo.user'));
    return $renderer->render([$app_item1, $f->divider()->horizontal(), $app_item2]);
}
 

Example 5: With lead icon

Course

ILIAS Course

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
OriginCourse Title 1
Last Update24.11.2011
LocationRoom 123, Main Street 44, 3012 Bern 
<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Item\Standard;
 
/**
 * With Lead Icon
 */
function with_lead_icon()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
    $actions = $f->dropdown()->standard(array(
        $f->button()->shy("ILIAS", "https://www.ilias.de"),
        $f->button()->shy("GitHub", "https://www.github.com")
    ));
    $app_item = $f->item()->standard("ILIAS Course")
        ->withActions($actions)
        ->withProperties(array(
            "Origin" => "Course Title 1",
            "Last Update" => "24.11.2011",
            "Location" => "Room 123, Main Street 44, 3012 Bern"))
        ->withDescription("Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.")
        ->withLeadIcon($f->symbol()->icon()->standard('crs', 'Course', 'medium'));
    return $renderer->render($app_item);
}
 

Example 6: With lead image

Thumbnail Example

ILIAS Course

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
OriginCourse Title 1
Last Update24.11.2011
LocationRoom 123, Main Street 44, 3012 Bern 
<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Item\Standard;
 
/**
 * With Lead Image
 */
function with_lead_image()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
    $actions = $f->dropdown()->standard(array(
        $f->button()->shy("ILIAS", "https://www.ilias.de"),
        $f->button()->shy("GitHub", "https://www.github.com")
    ));
    $app_item = $f->item()->standard("ILIAS Course")
        ->withActions($actions)
        ->withProperties(array(
            "Origin" => "Course Title 1",
            "Last Update" => "24.11.2011",
            "Location" => "Room 123, Main Street 44, 3012 Bern"))
        ->withDescription("Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.")
        ->withLeadImage($f->image()->responsive(
            "src/UI/examples/Image/HeaderIconLarge.svg",
            "Thumbnail Example"
        ));
    return $renderer->render($app_item);
}
 

Example 7: With lead text

11:20 - 12:40

Weekly Meeting

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
OriginCourse Title 1
Last Update24.11.2011
LocationRoom 123, Main Street 44, 3012 Bern 
<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Item\Standard;
 
/**
 * With Lead Text
 */
function with_lead_text()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
    $actions = $f->dropdown()->standard(array(
        $f->button()->shy("ILIAS", "https://www.ilias.de"),
        $f->button()->shy("GitHub", "https://www.github.com")
    ));
    $app_item = $f->item()->standard("Weekly Meeting")
        ->withActions($actions)
        ->withProperties(array(
            "Origin" => "Course Title 1",
            "Last Update" => "24.11.2011",
            "Location" => "Room 123, Main Street 44, 3012 Bern"))
        ->withDescription("Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.")
        ->withLeadText("11:20 - 12:40");
    return $renderer->render($app_item);
}
 

Example 8: With link title

ILIAS

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Code Repo
LocationRoom 123, Main Street 44, 3012 Bern 
<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Item\Standard;
 
/**
 * With a standard link as title
 */
function with_link_title()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
    $app_item = $f->item()->standard($f->link()->standard("ILIAS", "https://www.ilias.de"))
        ->withProperties(array(
            "Code Repo" => $f->button()->shy("ILIAS on GitHub", "https://www.github.com/ILIAS-eLearning/ILIAS"),
            "Location" => "Room 123, Main Street 44, 3012 Bern"))
        ->withDescription("Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.");
    return $renderer->render($app_item);
}
 

Example 9: With main action

Item Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
OriginCourse Title 1
Last Update24.11.2011
LocationRoom 123, Main Street 44, 3012 Bern 
<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Item\Standard;
 
/**
 * Base
 */
function with_main_action()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
    $actions = $f->dropdown()->standard(array(
        $f->button()->shy("ILIAS", "https://www.ilias.de"),
        $f->button()->shy("GitHub", "https://www.github.com")
    ));
    $main_action = $f->button()->standard("Edit", "#");
    $app_item = $f->item()->standard("Item Title")
        ->withActions($actions)
        ->withMainAction($main_action)
        ->withProperties(array(
            "Origin" => "Course Title 1",
            "Last Update" => "24.11.2011",
            "Location" => "Room 123, Main Street 44, 3012 Bern"))
        ->withDescription("Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.");
    return $renderer->render($app_item);
}
 

Example 10: With main link action

Item Title

Open ILIAS
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
OriginCourse Title 1
Last Update24.11.2011
LocationRoom 123, Main Street 44, 3012 Bern 
<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Item\Standard;
 
/**
 * Base
 */
function with_main_link_action()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
    $main_action = $f->link()->standard("Open ILIAS", "https://www.ilias.de");
    $app_item = $f->item()->standard("Item Title")
        ->withMainAction($main_action)
        ->withProperties(array(
            "Origin" => "Course Title 1",
            "Last Update" => "24.11.2011",
            "Location" => "Room 123, Main Street 44, 3012 Bern"))
        ->withDescription("Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.");
    return $renderer->render($app_item);
}
 

Example 11: With progress

Item Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
75 % 
<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Item\Standard;
 
/**
 * With progress meter chart
 */
function with_progress()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
    $chart = $f->chart()->progressMeter()->standard(100, 75);
    $app_item = $f->item()->standard("Item Title")
                  ->withDescription("Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.")
                  ->withProgress($chart);
    return $renderer->render($app_item);
}
 

Example 12: With shy properties

Item Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
LMS
Code Repo
LocationRoom 123, Main Street 44, 3012 Bern 
<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Item\Standard;
 
/**
 * With shy buttons as property values
 */
function with_shy_properties()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
    $app_item = $f->item()->standard("Item Title")
        ->withProperties(array(
            "LMS" => $f->button()->shy("ILIAS", "https://www.ilias.de"),
            "Code Repo" => $f->button()->shy("GitHub", "https://www.github.com"),
            "Location" => "Room 123, Main Street 44, 3012 Bern"))
        ->withDescription("Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.");
    return $renderer->render($app_item);
}
 

Example 13: With shy title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Code Repo
LocationRoom 123, Main Street 44, 3012 Bern 
<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Item\Standard;
 
/**
 * With shy button as title
 */
function with_shy_title()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
    $app_item = $f->item()->standard($f->button()->shy("ILIAS", "https://www.ilias.de"))
        ->withProperties(array(
            "Code Repo" => $f->button()->shy("GitHub", "https://www.github.com"),
            "Location" => "Room 123, Main Street 44, 3012 Bern"))
        ->withDescription("Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.");
    return $renderer->render($app_item);
}
 

Relations

Parents
  1. UIComponent
  2. Item