Application
The Skin application is initialized via the Skin.App.init function.
For the most part, the application makes use of data-* attributes.
The following functionality is available:
debug
When debug is set to true, errors will output to the console. This should not be enabled in production environments.
urlTheme
When urlTheme.enabled is set to true, the theme can be changed using a URL query parameter.
For example, by adding ?theme=dark to the URL, the theme will be set to dark, and the preference will be saved in local storage. Valid themes are light and dark.
The urlTheme.paramName member defines the URL query parameter used to change the theme.
theme
When theme.enabled is set to true, elements with a data-theme-toggle attribute will set the theme to its value when clicked.
To see it in action, see the dark mode example.
hide
When hide.enabled is set to true, elements with a data-hide attribute will hide the element with that ID when clicked.
An optional data-hide-duration attribute specifies the duration (in minutes) to keep the element hidden. Omitting the data-hide-duration attribute or setting it to 0 will only hide the element for the current page load.
In addition, an optional data-hide-transition attribute specifies the animation duration (in milliseconds).
Adding the attribute data-hidden="true" to the dismissible element will hide it by default. This prevents it from showing before it is hidden by JavaScript.
For an example, see the skin-toast component.
show
When show.enabled is set to true, elements with a data-show attribute will show the element with that ID when clicked.
Hidden elements should include the attribute data-hidden="true" to hide by default.
An optional data-show-duration attribute specifies the duration (in milliseconds) to show the element. Omitting the data-show-duration attribute or setting it to 0 will show the element for the current page load.
In addition, an optional data-show-transition attribute specifies the animation duration (in milliseconds).
For an example, see the skin-toast component.
toggle
When toggle.enabled is set to true, elements with a data-toggle attribute will toggle visibility of the element with that ID when clicked. An optional data-toggle-transition attribute sets the animation duration in milliseconds (250 by default).
For an example, see example toggle.
loadSrc
When loadSrc.enabled is set to true, all images with a data-load-src attribute will have their src replaced by its value. This is useful for "lazy loading" larger images to speed up the page load time.
For an example, see example images.
modal
When modal.enabled is set to true, elements with a data-modal-open attribute will open the modal with that ID when clicked. An optional data-modal-strict attribute specifies whether to open the modal in strict mode.
In addition, elements with a data-modal-close attribute will close the modal with that ID when clicked.
For an example, see the tc-modal component.
popup
When popup.enabled is set to true, elements with a data-popup attribute will be used to show a popup with that ID.
An optional data-popup-placement attribute allows customization of the placement (default of bottom).
An optional data-popup-offset attribute allows customization of the mainAxis and crossAxis offset (default of 0,0). Note: When the popup is a tooltip, only the mainAxis value will be used.
An optional data-popup-unique attribute will force all other popups to hide before showing when value equals true.
An optional data-popup-trigger attribute allows the popup to show on click, hover, or always (default).
For an example, see skin-popup component.
tabs
When tabs.enabled is set to true, Skin will use elements with role=tab, role=tablist and role=tabpanel to build interactive tabs.
The tabs are fully accessible, and work with the following keyboard interactions:
| Command | Description |
|---|---|
| ← → | Selects the previous/next non-disabled tab |
| Space Enter | Activate the selected tab |
When tabs.updateHash is set to true, the URL hash will update as tabs are shown. In addition, tabs can be shown by the URL hash.
For an example, see example tabs.