Ignite¶
Ignite is a CSS-framework written in LESS and serving as the base for all components used in flare. https://ignite.viur.dev/
In Flare, some simpler and more complex components are already implemented with appropriate CSS-classes.
Input¶
The Input can be used with <flare-input> tag and provides the basis input element with ignite specific css classes.
Label¶
The Label can be used with <flare-label> tag and provides the basis label element with ignite specific css classes.
Switch¶
The switch is an on/off slide-control and can be used with <flare-switch> tag.
The component stores the current state internally in a checkbox input field.
Check¶
The Check Component can be used with <flare-check> tag.
Like the switch, the internal state is stored in a checkbox input field.
Through this component the display of the checkbox can be customized via css.
Radio¶
The Radio Component can be used with <flare-radio> tag.
The internal state is stored in a radio input field.
Through this component the display of the checkbox can be customized via css.
Select¶
The Select can be used with <flare-select> tag and provides the basis select element with ignite specific css classes.
In addition it adds per default a unselectable default option.
Textarea¶
The Textarea can be used with <flare-textarea> tag and provides the basis textarea element with ignite specific css classes.
Progress¶
The Progress can be used with <flare-progess> tag and provides the basis progress element with ignite specific css classes.
Item¶
The Item component can be used with the tag <flare-item> and provides a simple box component. It can contain an image as well as a title and a description
Table¶
The Table component can be used with the <flare-table> tag and provides the basis table element with ignite specific css classes.
In additon this component provides the functions prepareRow and prepareCol to generate the table grid.
Popout¶
The Popout component can be used with the <flare-popout> tag.
This component is a floating box and is often used as a tooltip or contextmenu.
With the css classes “popout–sw”, “popout–nw”.. you can change the direction.
Popup¶
The are several types of popups windows. All popups are based on the base Popup Class. Each popup provides a close button, a header, a body and a footer. All Popups are automatically added to the <body>-tag.
Prompt¶
The Prompt is a simple Input box with a cancel and ok button. Use this to get some user Input.
Alert¶
The Alert is a simple Messagebox with an ok button. Use this for some Feedback.
Confirm¶
The Confirm is a Messagebox with a yes / no selection. Each button has its own callback so you can bump different actions based on the selection that was made
Textarea Dialog¶
This Popup basically does the same as the Prompt, but it uses a textarea field instead of an input field.