Semantic UI represents a description of an user interface, in terms of 'what', and not 'how'.
Each element in the description consists of an identifier, a set of attributes, and a set of children.
##Syntax uses in the examples
The example syntax uses an indent-delimited format, with the character '#' indicating a comment until the end of the line. Multi-line comments start with '#[' and end with ']#', and nesting is allowed.
<Element> ::= <Identifier>(':' <Attribute>+)? (<Indent-in><Element>+<Indent-out>)?
<Identifier> ::= [A-Za-z][A-Za-z0-9_\-]*
<Attribute> ::= <Identifier> ('(' <Value-list> ')')?
<Value-list> ::= <Value> (',' <Value>)*
<Value> ::= {number}|{string literal}|{boolean literal}|<Identifier>
- Class: Defines the primary semantic meaning of the element. Only one is allowed.
Group: Declares a set of elements to be part of a groupingPage: Group, to be displayed as a pageScreen: Group, to be displayed as a screen (would display inside the main window in windowed environments)Window: Group, to be displayed as a floating window (in single-window or fullscreen environments, equivalent to Screen)Dialog: Group, to be displayted as a popup window/panel that prevents using the controls behind it while open
Info: Declares an element that displays informationLabel: Text, to be used as a label for the parent elementMessage: Text, to be displayed as a popup dialog if the conditions are metHeader: Text, to be displayed as a group headerTitle: HeaderSubtitle: Header
Action: Declares an element to be interactable (button/hyperlink/menu item)Choice: Declares an elementToggle: Declares an element that can toggle on/offInput: Declares an element that allows text inputNumber: Declares an element that lets you input or choose a numberDate: Declares an element that lets you input or choose a dateTime: Declares an element that lets you input or choose a timeDateTime: Declares an element that lets you input or choose a date and timePlace: Declares an element that lets you input or choose a place
- Limits: Declare the limits of the element. For Choice elements, this is the number of options that can be selected at once.
Min(int): Declares the minimum value that the element can acceptMax(int): Declares the maximum value that the element can acceptRange(int,int): Equivalent to Min and Max togetherSingle: Equivalent to Range(1,1)
- Display: Hints for selecting display preferences
Priority(int): Declares the priority of the element. In situations of limited space, will be used to decide which elements to hide first. Negative numbers should be hidden by default even if there's space, unless the user chooses a "verbose" view mode.Loose: Declares that the grouping or choice is preferred to not have a visual grouping delimiting the children from the element's siblings.