7 use \ILIAS\UI\Component as
C;
194 public function deck(array $cards)
link()
description: purpose: > Links are used navigate to other resources or views of the system...
input()
description: purpose: > In opposite to components with a purely receptive or at most navigational ch...
deck(array $cards)
description: purpose: > Decks are used to display multiple Cards in a grid.They should be used if a ...
legacy($content)
description: purpose: > This component is used to wrap an existing ILIAS UI element into a UI compon...
chart()
description: purpose: > Charts are used to graphically represent data in various forms such as maps...
table()
description: purpose: > Tables present a set of uniformly structured data.
listing()
description: purpose: > Listings are used to structure itemised textual information.composition: > Listings may contain ordered, unordered, or labeled items. effect: > Listings hold only textual information. They may contain Links but no Buttons. rules: composition: 1: Listings MUST NOT contain Buttons.
This is how the factory for UI elements looks.
popover()
description: purpose: > Popovers can be used when space is scarce i.e.within List GUI items...
dropdown()
description: purpose: > Dropdowns reveal a list of interactions that change the system’s status or ...
dropzone()
description: purpose: > Dropzones are containers used to drop either files or other HTML elements...
divider()
description: purpose: > A divider marks a thematic change in a sequence of other components...
card()
description: purpose: > A card is a flexible content container for small chunks of structured data...
counter()
description: purpose: > Counter inform users about the quantity of items indicated by a glyph...
viewControl()
description: purpose: > View Controls switch between different visualisation of data.composition: > View Controls are composed mainly of buttons, they are often found in toolbars. effect: Interacting with a view control changes to display in some content area.
icon()
description: purpose: > Icons are quickly comprehensible and recognizable graphics.They indicate the functionality or nature of a text-element or context: Icons will mainly be used in front of object-titles, e.g. in the header, the tree and in repository listing. Icons can be disabled. Disabled Icons visually communicate that the depicted functionality is not available for the intended audience. composition: > Icons come in three fixed sizes: small, medium and large. They can be configured with an additional "abbreviation", a text of a few characters that will be rendered on top of the image. The Disabled Icons merely stand out visually: A color shade covers the Icon. effect: > Icons themselves are not interactive; however they are allowed within interactive containers. rivals: Glyph: > Glyphs are typographical characters that act as a trigger for some action. Image: > Images belong to the content and can be purely decorative.rules: usage: 1: Icons MUST be used to represent objects or context. 2: Icons MUST be used in combination with a title or label. 3: An unique Icon MUST always refer to the same thing. style: 1: Icons MUST have a class indicating their usage. 2: Icons MUST be tagged with a CSS-class indicating their size. accessibility: 1: Icons MUST use aria-label. 2: Disabled Icons MUST bear an aria-label indicating the special status. wording: 1: The aria-label MUST state the represented object-type. 2: The abbreviation SHOULD consist of one or two letters.
image()
description: purpose: The Image component is used to display images of various sources.composition: An Image is composed of the image and an alternative text for screen readers. effect: Images may be included in interacted components but not interactive on their own.rules: accessibility: 1: > Images MUST contain the alt attribute. This attribute MAY be left empty (alt="") if the image is of decorative nature. According to the WAI, decorative images don’t add information to the content of a page. For example, the information provided by the image might already be given using adjacent text, or the image might be included to make the website more visually attractive (see https://www.w3.org/WAI/tutorials/images/decorative/).
breadcrumbs(array $crumbs)
description: purpose: > Breadcrumbs is a supplemental navigation scheme.It eases the user's navigati...
item()
description: purpose: > An item displays a unique entity within the system.It shows information abou...
modal()
description: purpose: The Modal forces users to focus on the task at hand.composition: > A Modal is ...
button()
description: purpose: > Buttons trigger interactions that change the system’s or view's status...
panel()
description: purpose: > Panels are used to group titled content.composition: > Panels consist of a h...
messageBox()
description: purpose: > Message Boxes inform the user about the state of the system or an ongoing us...
__construct(C\Counter\Factory $counter_factory, C\Glyph\Factory $glyph_factory, C\Button\Factory $button_factory, C\Listing\Factory $listing_factory, C\Image\Factory $image_factory, C\Panel\Factory $panel_factory, C\Modal\Factory $modal_factory, C\Dropzone\Factory $dropzone_factory, C\Popover\Factory $popover_factory, C\Divider\Factory $divider_factory, C\Link\Factory $link_factory, C\Dropdown\Factory $dropdown_factory, C\Item\Factory $item_factory, C\Icon\Factory $icon_factory, C\ViewControl\Factory $viewcontrol_factory, C\Chart\Factory $chart_factory, C\Input\Factory $input_factory, C\Table\Factory $table_factory, C\MessageBox\Factory $messagebox_factory, C\Card\Factory $card_factory)
glyph()
description: purpose: > Glyphs map a generally known concept or symbol to a specific concept in ILIA...