iconic
Iconic theme and components for RiotJS
The iconic theme is built atop Starveling building out a minimal set of additional classes to support iconic's button styles and the document's visual elements.
Iconic theme and components for RiotJS
The iconic theme is built atop Starveling building out a minimal set of additional classes to support iconic's button styles and the document's visual elements.
iconic-announcement is a toaster style flash-message with cancellable automatic timeout. It's suitable for displaying short-lived announcements and notifications.
After clicking the Announcement button, you'll see a generic notification message. The message has been configured to show for 2 seconds before automatically dismissing
Try clicking on the announcement to interrupt the automatic dismissal, then click the close button to manually dismiss the announcement.
After pressing the Warning's Warning button, you'll see a hostile notification, informing the end-user of the imminent danger.
The warning announcement has been configured to display for 6 seconds before automatic dismissal. As a developer you can elect any number of milliseconds to display an iconic-announcement
After pressing the Manual button, you'll see a hostile notification, informing the end-user of the imminent danger.
The warning announcement has been configured to display forever so there is no automatic dismissal.
A unique name by which a containing riot-tag can reference the iconic-announcementthis.tags.announcement
announcement name
not named
Control the visual style of the announcement
success | warning
none
Display the announcement
milliseconds :: How many ms before the announcement is automatically dismissed
Show's announcement for 10,000ms
tag.show(6000)
iconic-navigation is a highly discoverable, responsive left-hand & right-hand navigation bar with automatic link-anchor capturing.
iconic-navigation is designed to be more discoverable than the usual hamburger menu. iconic-navigation also provides automatic on-page anchor capturing helping make nagivation more intuitive.
By default iconic-navigation is closed. This behaviour can be configured so that the navigation is openend when the viewport width reaches an appropriate size.
iconic-navigation is present on this page. Try resizing the browser window to see it in action.
The hamburger is disclosed only when the navigation bar is iconized. This enables tap-to-read for mobile browsers and hover tool-tips for desktop browsers
specify if iconic-navigation should be fixed to the left or right of the viewport
left | right | none
none
specify the expand effect
slide | overlay
overlay
iconic-tip is a multi-directional tooltip tied to a specific element, or set of elements.
iconic-tip's content can be dynamically set shared amongst a group of elements. each element need's the iconic-tip's name set in its data-tip property and the magic will happen.
This visible tooltip will remain visible when receiving user-interactions shuch as mouse-hover or click actions enabling iconic-tip to double as a basic flyout control.
specify the position to the element at which the iconic-tip should appear
above | right | below | left
none
iconic-button is a standard button but it also responds to hotkey-focused keyboard user interaction.
By pressing shift + ctrl outside of a form element, all iconic-button's will disclose their associated hotkey making it easy for users to learn new ways to interact with your application.
Try holding down shift + ctrl to display the hotkey overlay on the add button
A unique name by which a containing riot-tag can reference the iconic-buttonthis.tags.buttonName
buttonName
not named
Control the visual style of the button
button-primary | button-inverted | none
none
A keyboard character that can be used to trigger the buttons onclick event
a..z, 0..9
none
By holding the shift + ctrl key all iconic-button's with assigned hotkey's will transform to show their hotkey