Note: In HTML, all SPF components must be children of an element with "spf-body spf-uikit" classnames. For example these classnames can be assigned to page's body tag
Accordion
Accordion is taken from Govau UI Kit and uses its JS library to function.- HTML and CSS structure can be found in Patten Lab
- JS code and examples can be found in actgov.js file in JS folder. More information on file structure
Refer to Govau UI Kit's website to learn how to use it.
Animate
Animate is also taken from Govau UI Kit and uses its JS library to function.- HTML and CSS structure can be found in Patten Lab
- JS code and examples can be found in actgov.js file in JS folder. More information on file structure
Refer to Govau UI Kit's website to learn how to use it.
Side nav
Side navigation uses SPF's JS library to work.- HTML and CSS structure can be found in Patten Lab
- SPF JS namespace is "SPF"
- Functions:
- SPF.isSideNav(element) : Use this function to register an element as side navigation. HTML structure should follow the above item. The main side nav element which has "spf-side-nav" classname should be passed to this function
- Example:
SPF.isSideNav(document.querySelector('.spf-side-nav'))
Tabs
Tabs component uses SPF's JS library to work.- HTML and CSS structure can be found in Patten Lab
- SPF JS namespace is "SPF"
- Functions:
- SPF.SPF.isTabElement(element) : Use this function to register a tabs element. HTML structure should follow the above item. The main tabs element which has "spf-tabs" classname should be passed to this function
- For the items in navigation that have sub-items, their state must be specified using "close" or "open" classnames.
- Example:
SPF.isTabElement(document.querySelector('.spf-tabs'))
Top nav (mobile version)
Top nav for mobiles component uses SPF's JS library to work.- HTML and CSS structure can be found in Patten Lab
- SPF JS namespace is "SPF"
- Functions:
- SPF.SPF.isTopNav(element) : Use this function to register a top navigation mobile element. HTML structure should follow the above item. The main top nav mobiel element which has "spf-top-nav-mobile" classname should be passed to this function
- Example:
SPF.isTopNav(document.querySelector('.spf-top-nav-mobile'))