7 use \ILIAS\UI\Component as
C;
214 public function deck(array $cards)
240 return $this->legacy_factory->legacy($content);
link()
description: purpose: > Links are used navigate to other resources or views of the system by clickin...
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 ...
symbol()
description: purpose: > Symbols are graphical representations of concepts or contexts quickly compre...
menu()
description: purpose: > Menus let the user choose from several (navigational) options.
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...
tree()
description: purpose: > Trees present hierarchically structured data.rivals: Drilldown: > A Drilldow...
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.
layout()
description: purpose: > Layout components are compontents used for the overall construction of the u...
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.
mainControls()
description: purpose: > Main Controls are components that are always usable, depending only on overa...
__construct(C\Counter\Factory $counter_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\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, C\Layout\Factory $layout_factory, C\MainControls\Factory $maincontrols_factory, C\Tree\Factory $tree_factory, C\Menu\Factory $menu_factory, C\Symbol\Factory $symbol_factory, C\Legacy\Factory $legacy_factory)
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.rules: interaction: 1: > Images MAY be included in interactive components. Images MAY also be interactive on their own. Clicking on an Image can e.g. provide navigation to another screen or showing a Modal on the same screen. The usage of an interactive Image MUST be confirmed by the JF to make sure that interactive Images will only be used in meaningful cases. 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...