Documentation

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

Sub

Description

Purpose: Sub Panels are used to structure the content of Standard panels further into titled sections.
Composition: Sub Panels consist of a title and a content section. They may contain either a Card or a Secondary Panel on their right side to display meta information about the content displayed.

Rivals

Standard Panel: The Standard Panel might contain a Sub Panel.
Card: The Sub Panels may contain one Card.
Secondary Panel: The Sub Panels may contain one Secondary Panel.

Rules

Usage

Sub Panels MUST only be inside Standard Panels

Composition

Sub Panels MUST NOT contain Sub Panels or Standard Panels as content.

Example 1: Base

Panel Title

Sub Panel Title

Some Content

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Panel\Sub;
 
function base()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $block = $f->panel()->standard(
        "Panel Title",
        $f->panel()->sub("Sub Panel Title", $f->legacy("Some Content"))
    );
 
    return $renderer->render($block);
}

Example 2: With actions

Panel Title

Sub Panel Title

Some Content

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\Examples\Panel\Sub;
 
function with_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")
    ));
 
    $block = $f->panel()->standard(
        "Panel Title",
        $f->panel()->sub("Sub Panel Title", $f->legacy("Some Content"))->withActions($actions)
    );
 
    return $renderer->render($block);
}

Example 3: With card

Panel Title

Sub Panel Title

Some Content

Card Heading

Card Content

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\Examples\Panel\Sub;
 
function with_card()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $block = $f->panel()->standard(
        "Panel Title",
        $f->panel()->sub("Sub Panel Title", $f->legacy("Some Content"))
            ->withFurtherInformation($f->card()->standard("Card Heading")->withSections(array($f->legacy("Card Content"))))
    );
 
    return $renderer->render($block);
}

Example 4: With secondary panel

Panel Title

Sub Panel Title

Some Content

Listing panel Title

Listing 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.

OriginCourse Title 1

Last Update24.11.2011

LocationRoom 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.

Listing 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.

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\Examples\Panel\Sub;
 
function with_secondary_panel()
{
    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.");
 
    $items = array(
        $f->item()->group("Listing Subtitle 1", array(
            $list_item1,
            $list_item2
        )),
        $f->item()->group("Listing Subtitle 2", array(
            $list_item3
        )));
 
    $panel = $f->panel()->secondary()->listing("Listing panel Title", $items)->withActions($actions);
 
    $block = $f->panel()->standard(
        "Panel Title",
        $f->panel()->sub("Sub Panel Title", $f->legacy("Some Content"))
          ->withFurtherInformation($panel)
    );
 
    return $renderer->render($block);
}

Relations

Parents

UIComponent
Panel