Slate
Description
- Purpose
- A Slate is a collection of Components that serve a specific and singular purpose in their entirety. The purpose can be subsummed in one Icon/Glyph and a very short label, for Slates will act as elaboration on one specific concept in ILIAS. Slates are not part of the content and will reside next to or over it. They will open and close without changing the current context. Accordingly, Slates depend on a component that toggles their visibility. In contrast to purely receptive components, Slates usually provide a form of interaction, whereas this interaction may trigger a navigation or alter the contents of the slate itself. However, slates are not meant to modify states of entities in the system in any way. E.g.: A Help-Screen, where the user can read a certain text and also search available topics via a text-input, or a drill-down navigation, where all siblings of the current level are shown next to a "back"-button. A special case of Slate is the Prompt: while in a common Slate the general direction of communiction is user to system, a Prompt is used for communication from the system to the user. These can be, e.g, alerts concerning new mails or a change in the online status of another learner.
- Composition
- Slates may hold a variety of components. These can be navigational entries, text and images or even other slates. When content-length exceeds the Slate's height, the contents will start scrolling vertically with a scrollbar on the right.
Rivals
- Panel
- Panels are used for content.
- Modal
- The Modal forces users to focus on a task, the slate offers possibilities.
- Popover
- Popovers provide additional information or actions in direct context to specific elements. Popovers do not have a fixed position on the page.
Rules
- Usage
- Slates MUST NOT be used standalone, i.e. without a controlling Component.
- There MUST be only one Slate visible at the same time per triggering Component.
- Elements in the Slate MUST NOT modify entities in the system.
- Slates MUST be closeable/expandable without changing context.
- Slates MUST NOT be used to provide additional information of content-objects that cannot be found anywhere else.
- Wording
- It MUST be possible to subsume a slates purpose in one Icon/Glyph and one word.
- Style
- Slates MUST have a fixed width.
- Slates MUST NOT use horizontal scrollbars.
- Slates SHOULD NOT use vertical scrollbars.
- Slates MUST visually relate to their triggering Component.
- Slates SHOULD NOT be affected by scrolling the page.
- Accessibility
- The Slate MUST be closeable by only using the keyboard
- Actions or navigational elements offered inside a Slate MUST be accessible by only using the keyboard
- A Slate MUST set the "aria-expanded" and the "aria-hidden" attributes.
Relations
- Parents
- UIComponent
- Main Controls
- Descendants
- Legacy
- Combined
- Notification