Brotkrumen-Navigation

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 in narrow container

List in il-narrow-content container

This concept is currently under discussion and not implemented by any container.

Your Contacts

Johnny Bravo with a very long name that should not fit

[user1]

Address

Main Street 44, 3012 Bern

Max Mustermann

[user2]

Address

Main Street 45, 3012 Bern

All Users

George Smith

[user3]

Address

Main Street 46, 3012 Bern

Same list without il-narrow-content container

Your Contacts

Johnny Bravo with a very long name that should not fit

[user1]

Address

Main Street 44, 3012 Bern

Max Mustermann

[user2]

Address

Main Street 45, 3012 Bern

All Users

George Smith

[user3]

Address

Main Street 46, 3012 Bern

/**
 * With lead image in narrow_container
 */
function with_lead_image_in_narrow_container()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $image = $f->image()->responsive(
        "src/UI/examples/Image/Avatar.png",
        "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("Johnny Bravo with a very long name that should not fit")
        ->withActions($actions)
        ->withProperties(array(
            "Address" => "Main Street 44, 3012 Bern"))
        ->withDescription("[user1]")
        ->withLeadImage($image);
 
    $list_item2 = $f->item()->standard("Max Mustermann")
        ->withActions($actions)
        ->withProperties(array(
            "Address" => "Main Street 45, 3012 Bern"))
        ->withDescription("[user2]")
        ->withLeadImage($image);
 
    $list_item3 = $f->item()->standard("George Smith")
        ->withActions($actions)
        ->withProperties(array(
            "Address" => "Main Street 46, 3012 Bern"))
        ->withDescription("[user3]")
        ->withLeadImage($image);
 
    $std_list = $f->panel()->listing()->standard("", array(
        $f->item()->group("Your Contacts", array(
            $list_item1,
            $list_item2
        )),
        $f->item()->group("All Users", array(
            $list_item3
        ))
    ));
 
    return "<h3>List in il-narrow-content container</h3>" .
        "This concept is currently under discussion and not implemented by any container."
        . "<div class='il-narrow-content' style='max-width:300px;'>"
        . $renderer->render($std_list)
        . "</div>"
        . "<h3>Same list without il-narrow-content container</h3>"
        . $renderer->render($std_list);
}

Example 3: With lead image

Content

Courses

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

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

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 4: 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 5: 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

UIComponent
Panel
Listing

Controller History:
- ilAdministrationGUI	execComm - entries - Services/Administration/classes/class.ilAdministrationGUI.php
- ilObjStyleSettingsGUI	execComm - entries - Services/Style/classes/class.ilObjStyleSettingsGUI.php
- ilSystemStyleMainGUI	execComm - entries - Services/Style/System/classes/class.ilSystemStyleMainGUI.php
- ilSystemStyleDocumentationGUI	execComm - entries - Services/Style/System/classes/Documentation/class.ilSystemStyleDocumentationGUI.php