UPDATE-RATE

Die Test-Installation wird aktuell zwischen 8:00 und 18:00 Uhr stündlich zur vollen Stunde aktualisiert.
Alles neu macht der Mai

ILIAS 9 ist da! Alle Infos zu den Highlights der neuen Version gibt es hier!

Documentation

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

Deck

Description

Purpose
Decks are used to display multiple Cards in a grid. They should be used if a page contains many content items that have similar style and importance. A Deck gives each item equal horizontal space indicating that they are of equal importance.
Composition
Decks are composed only of Cards arranged in a grid. The cards displayed by decks are all of equal size. This Size ranges very small (XS) to very large (XL).
Effect
The Deck is a mere scaffolding element, is has no effect.

Rules

Usage
  1. Decks MUST only be used to display multiple Cards.
Style
  1. The number of cards displayed per row MUST adapt to the screen size.

Example 1: Base

Open Title
Title
Entry 1
Some text
Entry 2
Some more text
Open Title
Title
Entry 1
Some text
Entry 2
Some more text
Open Title
Title
Entry 1
Some text
Entry 2
Some more text
Open Title
Title
Entry 1
Some text
Entry 2
Some more text
Open Title
Title
Entry 1
Some text
Entry 2
Some more text
Open Title
Title
Entry 1
Some text
Entry 2
Some more text
Open Title
Title
Entry 1
Some text
Entry 2
Some more text
Open Title
Title
Entry 1
Some text
Entry 2
Some more text
Open Title
Title
Entry 1
Some text
Entry 2
Some more text
<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Deck;
 
/* Copyright (c) 2016 Timon Amstutz <timon.amstutz@ilub.unibe.ch> Extended GPL, see docs/LICENSE */
 
function base()
{
    //Init Factory and Renderer
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    //Generate some content
    $content = $f->listing()->descriptive(
        array(
            "Entry 1" => "Some text",
            "Entry 2" => "Some more text",
        )
    );
 
    //Define the some responsive image
    $image = $f->image()->responsive(
        "./templates/default/images/logo/HeaderIcon.svg",
        "Thumbnail Example"
    );
 
    //Define the card by using the content and the image
    $card = $f->card()->standard(
        "Title",
        $image
    )->withSections(array(
        $content,
    ));
 
    //Define the deck
    $deck = $f->deck(array($card,$card,$card,$card,$card,
        $card,$card,$card,$card));
 
    //Render
    return $renderer->render($deck);
}
 

Example 2: Repository

Course
Certificate
Open Title
Title
Entry 1
Some text
Entry 2
Some more text
Entry 1
Some text
Entry 2
Some more text
Course
Certificate
Open Title
Title
Entry 1
Some text
Entry 2
Some more text
Entry 1
Some text
Entry 2
Some more text
Course
Certificate
Open Title
Title
Entry 1
Some text
Entry 2
Some more text
Entry 1
Some text
Entry 2
Some more text
Course
Certificate
Open Title
Title
Entry 1
Some text
Entry 2
Some more text
Entry 1
Some text
Entry 2
Some more text
Course
Certificate
Open Title
Title
Entry 1
Some text
Entry 2
Some more text
Entry 1
Some text
Entry 2
Some more text
Course
Certificate
Open Title
Title
Entry 1
Some text
Entry 2
Some more text
Entry 1
Some text
Entry 2
Some more text
Course
Certificate
Open Title
Title
Entry 1
Some text
Entry 2
Some more text
Entry 1
Some text
Entry 2
Some more text
Course
Certificate
Open Title
Title
Entry 1
Some text
Entry 2
Some more text
Entry 1
Some text
Entry 2
Some more text
Course
Certificate
Open Title
Title
Entry 1
Some text
Entry 2
Some more text
Entry 1
Some text
Entry 2
Some more text
<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Deck;
 
/* Copyright (c) 2018 Jesús López <lopez@leifos.com> Extended GPL, see docs/LICENSE */
 
function repository()
{
    //Init Factory and Renderer
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $icon = $f->symbol()->icon()->standard('crs', 'Course');
 
    $items = array(
        $f->button()->shy("Go to Course", "#"),
        $f->button()->shy("Go to Portfolio", "#"),
        $f->divider()->horizontal(),
        $f->button()->shy("ilias.de", "http://www.ilias.de")
    );
 
    $dropdown = $f->dropdown()->standard($items);
 
 
    $content = $f->listing()->descriptive(
        array(
            "Entry 1" => "Some text",
            "Entry 2" => "Some more text",
        )
    );
 
    $image = $f->image()->responsive(
        "./templates/default/images/logo/HeaderIcon.svg",
        "Thumbnail Example"
    );
 
    $card = $f->card()->repositoryObject(
        "Title",
        $image
    )->withObjectIcon(
        $icon
    )->withActions(
        $dropdown
    )->withCertificateIcon(
        true
    )->withSections(
        array(
            $content,
            $content,
        )
    );
 
    //Define the deck
    $deck = $f->deck(array($card,$card,$card,$card,$card,
        $card,$card,$card,$card))->withNormalCardsSize();
 
    //Render
    return $renderer->render($deck);
}
 

Example 3: User

Open Timon Amstutz
Timon Amstutz
Address
Hochschlustrasse 6
3006 Bern
Contact
timon.amstutz@ilub.unibe.ch
Open Timon Amstutz
Timon Amstutz
Address
Hochschlustrasse 6
3006 Bern
Contact
timon.amstutz@ilub.unibe.ch
Open Timon Amstutz
Timon Amstutz
Address
Hochschlustrasse 6
3006 Bern
Contact
timon.amstutz@ilub.unibe.ch
Open Timon Amstutz
Timon Amstutz
Address
Hochschlustrasse 6
3006 Bern
Contact
timon.amstutz@ilub.unibe.ch
Open Timon Amstutz
Timon Amstutz
Address
Hochschlustrasse 6
3006 Bern
Contact
timon.amstutz@ilub.unibe.ch
Open Timon Amstutz
Timon Amstutz
Address
Hochschlustrasse 6
3006 Bern
Contact
timon.amstutz@ilub.unibe.ch
Open Timon Amstutz
Timon Amstutz
Address
Hochschlustrasse 6
3006 Bern
Contact
timon.amstutz@ilub.unibe.ch
<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Deck;
 
/* Copyright (c) 2016 Timon Amstutz <timon.amstutz@ilub.unibe.ch> Extended GPL, see docs/LICENSE */
 
function user()
{
    //Init Factory and Renderer
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $address = $f->listing()->descriptive(
        array(
            "Address" => "Hochschlustrasse 6",
            "" => "3006 Bern",
            "Contact" => "timon.amstutz@ilub.unibe.ch"
        )
    );
 
    //Define the some responsive image
    $image = $f->image()->responsive(
        "./templates/default/images/logo/HeaderIcon.svg",
        "Thumbnail Example"
    );
 
    //Define the card by using the image and add a new section with a button
    $card = $f->card()->standard(
        "Timon Amstutz",
        $image
    )->withSections(array($address,$f->button()->standard("Request Contact", "")));
 
    //Create a deck with large cards
    $deck = $f->deck(array($card,$card,$card,$card,$card,$card,$card))->withLargeCardsSize();
 
    //Render
    return $renderer->render($deck);
}
 

Example 4: Xl card

Open Title
Title
Entry 1
Some text
Entry 2
Some more text
Open Title
Title
Entry 1
Some text
Entry 2
Some more text
Open Title
Title
Entry 1
Some text
Entry 2
Some more text
<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Deck;
 
/* Copyright (c) 2016 Timon Amstutz <timon.amstutz@ilub.unibe.ch> Extended GPL, see docs/LICENSE */
 
function xl_card()
{
    //Init Factory and Renderer
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    //Generate some content
    $content = $f->listing()->descriptive(
        array(
            "Entry 1" => "Some text",
            "Entry 2" => "Some more text",
        )
    );
 
    //Define the some responsive image
    $image = $f->image()->responsive(
        "./templates/default/images/logo/HeaderIcon.svg",
        "Thumbnail Example"
    );
 
    //Define the card by using the content and the image
    $card = $f->card()->standard(
        "Title",
        $image
    )->withSections(array(
        $content
    ));
 
    //Define the extra large deck
    $deck = $f->deck(array($card,$card,$card))->withExtraLargeCardsSize();
 
    //Render
    return $renderer->render($deck);
}
 

Relations

Parents
  1. UIComponent