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...
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.
Create styles array
The data for the language used.
counter()
description: purpose: > Counter inform users about the quantity of items indicated by a glyph...
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/).
card($title, \ILIAS\UI\Component\Image\Image $image=null)
button()
description: purpose: > Buttons trigger interactions that change the system’s status.Usually Buttons are contained in an Input Collection. The Toolbar is the main exception to this rule, since buttons in the Toolbar might also perform view changes. composition: > Button is a clickable, graphically obtrusive control element. It can bear text. effect: > On-click, the action indicated by the button is carried out. rivals: glyph: > Glyphs are used if the enclosing Container Collection can not provide enough space for textual information or if such an information would clutter the screen. links: > Links are used to trigger Interactions that do not change the systems status. They are usually contained inside a Navigational Collection.background: > Wording rules have been inspired by the iOS Human Interface Guidelines (UI-Elements->Controls->System Button)Style rules have been inspired from the GNOME Human Interface Guidelines->Buttons.rules: usage: 1: > Buttons MUST NOT be used inside a Textual Paragraph. interaction: 1: > A Button SHOULD trigger an action. Only in Toolbars, Buttons MAY also change the view. 2: > If an action is temporarily not available, Buttons MUST be disabled by setting as type 'disabled'. style: 1: > If Text is used inside a Button, the Button MUST be at least six characters wide. wording: 1: > The caption of a Button SHOULD contain no more than two words. 2: > The wording of the button SHOULD describe the action the button performs by using a verb or a verb phrase. 3: > Every word except articles, coordinating conjunctions and prepositions of four or fewer letters MUST be capitalized. 4: > For standard events such as saving or canceling the existing standard terms MUST be used if possible: Save, Cancel, Delete, Cut, Copy. 5: > There are cases where a non-standard label such as “Send Mail” for saving and sending the input of a specific form might deviate from the standard. These cases MUST however specifically justified. accessibility: 1: > DOM elements of type "button" MUST be used to properly identify an element as a Button if there is no good reason to do otherwise. 2: > Button DOM elements MUST either be of type "button", of type "a" accompanied with the aria-role “Button” or input along with the type attribute “button” or "submit".
panel()
description: purpose: > Panels are used to group titled content.composition: > Panels consist of a h...
glyph()
description: purpose: > Glyphs map a generally known concept or symbol to a specific concept in ILIA...