Documentation

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

Dynamically Distributed

Description

Purpose: Dynamically Distributed Horizontal Alignments take care of the individual Block's width in trying to keep as many Blocks horizontally next to each other as possible without wrapping its contents.
Effect: The contents of the Alignment will wrap before the contents of the Blocks. Not necessarily all columns will break at once: When there are three blocks, and two of them will still fit in one line, they will, and only the third column will be displayed underneath (taking the whole width, then).

Rivals

Evenly Distributed: All Blocks will have the same available space and will wrap their contents before breaking in between.

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\Horizontal\DynamicallyDistributed;
 
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>')
    ];
 
    return $renderer->render(
        $ui_factory->layout()->alignment()->horizontal()
            ->dynamicallyDistributed(...$blocks)
    );
}

Example 2: Nested

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Layout\Alignment\Horizontal\DynamicallyDistributed;
 
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');
 
 
    $blocks = [
        $ui_factory->legacy('<div class="example_block fullheight blue">D</div>'),
        $ui_factory->legacy('<div class="example_block fullheight green">E</div>'),
        $ui_factory->legacy('<div class="example_block fullheight yellow">F</div>')
    ];
 
    $aligned = $ui_factory->layout()->alignment()->horizontal()->dynamicallyDistributed(
        $ui_factory->legacy('<div class="example_block bluedark">A</div>'),
        $ui_factory->legacy('<div class="example_block greendark">B</div>'),
        $ui_factory->legacy('<div class="example_block yellowdark">C</div>')
    );
 
    return $renderer->render(
        $ui_factory->layout()->alignment()->horizontal()
            ->dynamicallyDistributed(
                $aligned,
                ...$blocks
            )
    );
}

Relations

Parents

UIComponent
Layout
Alignment
Horizontal