Documentation

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

Lightbox Card Page

Description

Purpose: A lightbox card page shows a card as a Lightbox modal.
Composition: The page shows a card with it's hidden sections.
Effect: The card title is used as the modal title and the sections and hidden sections are displayed in the content section of the lightbox modal.

Rules

Usage

A Lightbox card page MUST show a card.
A Lightbox card page SHOULD be used to show further information.

Example 1: Show modal on button click

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Modal\LightboxCardPage;
 
function show_modal_on_button_click(): string
{
    global $DIC;
 
    $ui = $DIC->ui()->factory();
 
    $item = $ui->item()
               ->standard('Some information')
               ->withDescription('A very long text.');
 
 
    $another_item = $ui->item()
                       ->standard('Some other information')
                       ->withDescription('Another very long text.')
                       ->withProperties([
                           'Belongs to' => 'No one',
                           'Created on' => 'June the 15th',
                           'Awarded by' => 'John Doe',
                           'Valid until' => 'Forever',
                       ]);
 
    $card = $ui->card()
               ->standard('A card title')
               ->withSections([$item])
               ->withHiddenSections([$another_item]);
    $box = $ui->modal()->lightboxCardPage($card);
    $modal = $ui->modal()->lightbox($box);
 
    $button = $ui
        ->button()
        ->standard('Show Modal', '')
        ->withOnClick($modal->getShowSignal());
 
    return $DIC->ui()->renderer()->render([$button, $modal]);
}

Relations

Parents

UIComponent
Modal