Dokumentation

'Kitchen Sink'-Dokumentation von Style: 'Delos' vom 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

Thumbnail Example
Title
Entry 1
Some text
Entry 2
Some more text
Thumbnail Example
Title
Entry 1
Some text
Entry 2
Some more text
Thumbnail Example
Title
Entry 1
Some text
Entry 2
Some more text
Thumbnail Example
Title
Entry 1
Some text
Entry 2
Some more text
Thumbnail Example
Title
Entry 1
Some text
Entry 2
Some more text
Thumbnail Example
Title
Entry 1
Some text
Entry 2
Some more text
Thumbnail Example
Title
Entry 1
Some text
Entry 2
Some more text
Thumbnail Example
Title
Entry 1
Some text
Entry 2
Some more text
Thumbnail Example
Title
Entry 1
Some text
Entry 2
Some more text
 
/* 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/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

Thumbnail Example
Title
Entry 1
Some text
Entry 2
Some more text
Entry 1
Some text
Entry 2
Some more text
Thumbnail Example
Title
Entry 1
Some text
Entry 2
Some more text
Entry 1
Some text
Entry 2
Some more text
Thumbnail Example
Title
Entry 1
Some text
Entry 2
Some more text
Entry 1
Some text
Entry 2
Some more text
Thumbnail Example
Title
Entry 1
Some text
Entry 2
Some more text
Entry 1
Some text
Entry 2
Some more text
Thumbnail Example
Title
Entry 1
Some text
Entry 2
Some more text
Entry 1
Some text
Entry 2
Some more text
Thumbnail Example
Title
Entry 1
Some text
Entry 2
Some more text
Entry 1
Some text
Entry 2
Some more text
Thumbnail Example
Title
Entry 1
Some text
Entry 2
Some more text
Entry 1
Some text
Entry 2
Some more text
Thumbnail Example
Title
Entry 1
Some text
Entry 2
Some more text
Entry 1
Some text
Entry 2
Some more text
Thumbnail Example
Title
Entry 1
Some text
Entry 2
Some more text
Entry 1
Some text
Entry 2
Some more text
 
/* 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')->withIsOutlined(true);
 
    $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/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

Thumbnail Example
Timon Amstutz
Address
Hochschlustrasse 6
3006 Bern
Contact
timon.amstutz@ilub.unibe.ch
Thumbnail Example
Timon Amstutz
Address
Hochschlustrasse 6
3006 Bern
Contact
timon.amstutz@ilub.unibe.ch
Thumbnail Example
Timon Amstutz
Address
Hochschlustrasse 6
3006 Bern
Contact
timon.amstutz@ilub.unibe.ch
Thumbnail Example
Timon Amstutz
Address
Hochschlustrasse 6
3006 Bern
Contact
timon.amstutz@ilub.unibe.ch
Thumbnail Example
Timon Amstutz
Address
Hochschlustrasse 6
3006 Bern
Contact
timon.amstutz@ilub.unibe.ch
Thumbnail Example
Timon Amstutz
Address
Hochschlustrasse 6
3006 Bern
Contact
timon.amstutz@ilub.unibe.ch
Thumbnail Example
Timon Amstutz
Address
Hochschlustrasse 6
3006 Bern
Contact
timon.amstutz@ilub.unibe.ch
/* 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/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

Thumbnail Example
Title
Entry 1
Some text
Entry 2
Some more text
Thumbnail Example
Title
Entry 1
Some text
Entry 2
Some more text
Thumbnail Example
Title
Entry 1
Some text
Entry 2
Some more text
 
/* 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/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