Alpine.js
Toast
Display notifications that appear on the front end to provide feedback or information to the user. ska-theme includes a template part for rendering Toasts, which can be enabled from ska-theme -> General -> Toasts. The template part is set up to use the skaToast Alpine.js module. Adding a toast Ensure that rendering of the template…
Dialog
ska-theme includes a custom Alpine.js component for handling HTML dialog elements. The module abstracts away calling the native .showModal(), .close() functions, adds x-transition to the dialog and enables closing of the modal by clicking away from the modal. Creating a dialog Adding x-data=”skaDialog” do an element will locate a button and a dialog from its’…
Sticky
ska-theme includes an Alpine.js component for creating a sticky header. For creating a sticky header, add the x-data=”skaSticky” attribute to the element that should stick. That element will receive the .is-sticky class when it is sticky. Arguments can be specified like this: x-data=”skaSticky({offset: 128})”. When making a sticky header, it’s a good idea to give…
Dropdown
ska-theme includes an Alpine.js component for creating dropdowns. For creating a dropdown, add the x-data=”skaDropdown” attribute to the root element that contains one or many elements that trigger a dropdown as well as the dropdown elements.The button or another element that triggers a dropdown should have a wrapper with the x-bind=”item(‘dropdownId’)” attribute. The element that…
Tabs
ska-theme includes an Alpine.js component for creating tabs. For creating tabs, add the x-data=”skaTabs” attribute to the root element.The element that contains the buttons that change tabs should have the x-bind=”tablist” attribute and individual buttons that allow to select a tab should have the x-bind=”tabItem(‘tabId’)” attribute with a unique ID that matches the content.Content elements…
Accordion
ska-theme includes an Alpine.js component for creating an accordion. For creating an accordion, add the x-data=”skaAccordion” attribute to the root element.All direct children of that element should have the attribute x-bind=”item”.The item elements should have 2 child elements, one with x-bind=”toggle” and another with x-bind=”content”. There is 1 argument available for the skaAccordion component: exclusive.…