Dokumentation

'Kitchen Sink'-Dokumentation von Style: 'Delos' vom Skin: 'ILIAS'

Standard

Description

Purpose
Standard item lists present lists of items with similar presentation. All items are passed by using Item Groups.
Composition
This Listing is composed of title and a set of Item Groups. Additionally an optional dropdown to select the number/types of items to be shown at the top of the Listing.

Example 1: Base

List Title

Subtitle 1

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.
Origin
Course Title 1
Last Update
24.11.2011
Location
Room 123, Main Street 44, 3012 Bern
Item 2 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.

Subtitle 2

Item 3 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.
/**
 * 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")
    ));
    $list_item1 = $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.");
 
    $list_item2 = $f->item()->standard("Item 2 Title")
        ->withActions($actions)
        ->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.");
 
    $list_item3 = $f->item()->standard("Item 3 Title")
        ->withActions($actions)
        ->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.");
 
    $std_list = $f->panel()->listing()->standard("List Title", array(
        $f->item()->group("Subtitle 1", array(
            $list_item1,
            $list_item2
        )),
        $f->item()->group("Subtitle 2", array(
            $list_item3
        ))
    ));
 
 
    return $renderer->render($std_list);
}
 

Example 2: With lead image

Content

Courses

Thumbnail Example
ILIAS Beginner 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.
Origin
Course Title 1
Last Update
24.11.2011
Location
Room 123, Main Street 44, 3012 Bern
Thumbnail Example
ILIAS Advanced 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.
Origin
Course Title 1
Last Update
24.11.2011
Location
Room 123, Main Street 44, 3012 Bern

Groups

Thumbnail Example
ILIAS User Group
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Origin
Course Title 1
Last Update
24.11.2011
Location
Room 123, Main Street 44, 3012 Bern
/**
 * With lead image
 */
function with_lead_image()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $image = $f->image()->responsive(
        "src/UI/examples/Image/HeaderIconLarge.svg",
        "Thumbnail Example"
    );
    $actions = $f->dropdown()->standard(array(
        $f->button()->shy("ILIAS", "https://www.ilias.de"),
        $f->button()->shy("GitHub", "https://www.github.com")
    ));
 
    $list_item1 = $f->item()->standard("ILIAS Beginner 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($image);
 
    $list_item2 = $f->item()->standard("ILIAS Advanced 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($image);
 
    $list_item3 = $f->item()->standard("ILIAS User Group")
        ->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($image);
 
    $std_list = $f->panel()->listing()->standard("Content", array(
        $f->item()->group("Courses", array(
            $list_item1,
            $list_item2
        )),
        $f->item()->group("Groups", array(
            $list_item3
        ))
    ));
 
 
    return $renderer->render($std_list);
}
 

Example 3: With lead text

Upcoming Events

Today

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.
Origin
Course Title 1
Last Update
24.11.2011
Location
Room 123, Main Street 44, 3012 Bern
13:00 - 14:00
Tech VC
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Origin
Course Title 1
Last Update
24.11.2011
Location
Room 123, Main Street 44, 3012 Bern

Tomorrow

8:00 - 10:00
Jour Fixe
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Origin
Course Title 1
Last Update
24.11.2011
Location
Room 123, Main Street 44, 3012 Bern
/**
 * With lead text and marker
 */
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")
    ));
 
    $df = new \ILIAS\Data\Factory();
 
    $list_item1 = $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.")
        ->withColor($df->color('#ff00ff'))
        ->withLeadText("11:20 - 12:40");
 
    $list_item2 = $f->item()->standard("Tech VC")
        ->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.")
        ->withColor($df->color('#F9F9D0'))
        ->withLeadText("13:00 - 14:00");
 
    $list_item3 = $f->item()->standard("Jour Fixe")
        ->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.")
        ->withColor($df->color('#000000'))
        ->withLeadText("8:00 - 10:00");
 
    $std_list = $f->panel()->listing()->standard("Upcoming Events", array(
        $f->item()->group("Today", array(
            $list_item1,
            $list_item2
        )),
        $f->item()->group("Tomorrow", array(
            $list_item3
        ))
    ));
 
 
    return $renderer->render($std_list);
}
 

Example 4: With list actions

List Title

Subtitle 1

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.
Origin
Course Title 1
Last Update
24.11.2011
Location
Room 123, Main Street 44, 3012 Bern
Item 2 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.

Subtitle 2

Item 3 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.
/**
 * With list actions
 */
function with_list_actions()
{
    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")
    ));
    $list_item1 = $f->item()->standard("Item Title")
        ->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.");
 
    $list_item2 = $f->item()->standard("Item 2 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.");
 
    $list_item3 = $f->item()->standard("Item 3 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.");
 
    $std_list = $f->panel()->listing()->standard("List Title", array(
        $f->item()->group("Subtitle 1", array(
            $list_item1,
            $list_item2
        )),
        $f->item()->group("Subtitle 2", array(
            $list_item3
        ))
    ))->withActions($actions);
 
 
    return $renderer->render($std_list);
}
 

Relations

Parents
  1. UIComponent
  2. Panel
  3. Listing