link()
description: purpose: > Links are used navigate to other resources or views of the system...
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...
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...
Create styles array
The data for the language used.
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. 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. effect: > Icons themselves are not interactive; however they are allowed within interactive containers. rivals: 1: > Glyphs are typographical characters that act as a trigger for some action. 2: > 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. 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/).
card($title, \ILIAS\UI\Component\Image\Image $image=null)
description: purpose: > A card is a flexible content container for small chunks of structured data...
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 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...