Documentation

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

Simple

Description

Purpose: The Simple Node is a very basic entry for a Tree.
Composition: It consists of a string-label, an optional Icon and an optional URI.
Effect: The Simple Node can be configured with an URL to load data asynchronously. In this case, before loading there is always an Expand Glyph in front of the Node. If there are no further levels, the Expand Glyph will disappear after loading. Furthermore, SimpleNode implements Clickable and can be configured to trigger an action.

Rules

Usage

A Simple Node SHOULD be used when there is no need to relay further information for the user to choose. This is the case for most occurrences where repository-items are shown.

Example 1: Simple

label
label

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Tree\Node\Simple;
 
function simple()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $icon = $f->symbol()->icon()->standard("crs", 'Example');
 
    $node1 = $f->tree()->node()->simple('label');
    $node2 = $f->tree()->node()->simple('label', $icon);
 
    $data = [['node' => $node1], ['node' => $node2]];
 
    $recursion = new class () implements \ILIAS\UI\Component\Tree\TreeRecursion {
        public function getChildren($record, $environment = null): array
        {
            return [];
        }
 
        public function build(
            \ILIAS\UI\Component\Tree\Node\Factory $factory,
            $record,
            $environment = null
        ): \ILIAS\UI\Component\Tree\Node\Node {
            return $record['node'];
        }
    };
 
    $tree = $f->tree()->expandable('Label', $recursion)
              ->withData($data);
 
    return $renderer->render($tree);
}

Example 2: SimpleWithLink

label
label

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Tree\Node\Simple;
 
function simpleWithLink()
{
    global $DIC;
    $factory = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $icon = $factory->symbol()
        ->icon()
        ->standard("crs", 'Example');
 
    $node1 = $factory->tree()
        ->node()
        ->simple('label');
 
 
    $uri = new \ILIAS\Data\URI('https://ilias.de');
 
    $node2 = $factory->tree()
        ->node()
        ->simple('label', $icon, $uri);
 
    $data = [['node' => $node1], ['node' => $node2]];
 
    $recursion = new class () implements \ILIAS\UI\Component\Tree\TreeRecursion {
        public function getChildren($record, $environment = null): array
        {
            return [];
        }
 
        public function build(
            \ILIAS\UI\Component\Tree\Node\Factory $factory,
            $record,
            $environment = null
        ): \ILIAS\UI\Component\Tree\Node\Node {
            return $record['node'];
        }
    };
 
    $tree = $factory->tree()->expandable('Label', $recursion)
              ->withData($data);
 
    return $renderer->render([$tree]);
}

Relations

Parents

UIComponent
Tree
Node