Documentation

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

Evenly Distributed

Description

Purpose: Evenly Distributed Horizontal Alignments are used to position Blocks horizontally next to each other with evenly sized "columns", i.e. giving each block the same available space.
Effect: All Block will have the same space available. A Layout with 4 Blocks, e.g., will assign 25% of the available space to each column. The Blocks' contents will break before wrapping starts in between them. Columns will break very late, and when they do, they _all_ will.

Rivals

Dynamically Distributed: Distributes available space according to the width of the individual Blocks. Single columns will break their contents, while others don't.

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\EvenlyDistributed;
 
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');
 
    $edl = $ui_factory->layout()->alignment()->horizontal()->evenlyDistributed(
        $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($edl);
}

Example 2: Nested

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Layout\Alignment\Horizontal\EvenlyDistributed;
 
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()->evenlyDistributed(
        $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()
            ->evenlyDistributed(
                $aligned,
                ...$blocks
            )
    );
}

Relations

Parents

UIComponent
Layout
Alignment
Horizontal