Documentation

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

Vertical

Description

Purpose: A Vertical Alignment groups Blocks and displays those groups vertically aligned, i.e. below each other.
Effect: Blocks are diplayed below each other.

Rivals

Force Horizontal: Not a real rival, but rather the counterpart: Horizontal Alignemnts will position the groups (preferably) next to each other.
Table: Tables may present potentially large sets of uniformly structured data. While Tables are not meant to layout Components, Vertical Alignments are nothing to mimic a tablelike behavior.

Example 1: Base

Example Block

Another Example Block

And a third block is also part of this group

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Layout\Alignment\Vertical;
 
function base()
{
    global $DIC;
    $ui_factory = $DIC['ui.factory'];
    $renderer = $DIC['ui.renderer'];
    $tpl = $DIC['tpl'];
    $tpl->addCss('src/UI/examples/Layout/Alignment/alignment_examples.css');
 
    $blocks = [
        $ui_factory->legacy('<div class="example_block fullheight blue">Example Block</div>'),
        $ui_factory->legacy('<div class="example_block fullheight green">Another Example Block</div>'),
        $ui_factory->legacy('<div class="example_block fullheight yellow">And a third block is also part of this group</div>')
    ];
 
    $vertical = $ui_factory->layout()->alignment()->vertical(...$blocks);
    return $renderer->render($vertical);
}

Example 2: Nested

The block above.

Example Block

Another Example Block

And a third block is also part of this group

The block below.

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Layout\Alignment\Vertical;
 
function nested()
{
    global $DIC;
    $ui_factory = $DIC['ui.factory'];
    $renderer = $DIC['ui.renderer'];
    $tpl = $DIC['tpl'];
    $tpl->addCss('src/UI/examples/Layout/Alignment/alignment_examples.css');
 
    $icon = $ui_factory->image()->standard("templates/default/images/logo/HeaderIconResponsive.svg", "ilias");
    $blocks = [
        $ui_factory->legacy('<div class="example_block fullheight blue">Example Block</div>'),
        $icon,
        $ui_factory->legacy('<div class="example_block fullheight green">Another Example Block</div>'),
        $icon,
        $ui_factory->legacy('<div class="example_block fullheight yellow">And a third block is also part of this group</div>')
    ];
 
    $dynamic = $ui_factory->layout()->alignment()->horizontal()->dynamicallyDistributed(...$blocks);
    $evenly = $ui_factory->layout()->alignment()->horizontal()->evenlyDistributed(
        $icon,
        $icon,
        $dynamic
    );
 
 
    $vertical = $ui_factory->layout()->alignment()->vertical(
        $ui_factory->legacy('<div class="example_block fullheight red">The block above.</div>'),
        $evenly,
        $ui_factory->legacy('<div class="example_block fullheight red">The block below.</div>')
    );
 
 
    return $renderer->render($vertical);
}

Relations

Parents

UIComponent
Layout
Alignment