pat-toggle Documentation: https://patternslib.com/demos/toggle#documentation
To use Patternslib, just add the Patternslib script to your website and start using it's classes on DOM nodes.
There are several ways to integrate the Patternslib script.
The Patternslib bundle is added to the npm package and and can be directly loaded from a CDN.
Here is an example with the jsDelivr service:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Patternslib training</title>
<script src="https://cdn.jsdelivr.net/npm/@patternslib/[email protected]/dist/bundle.min.js"></script>
</head>
...And one with UNPKG:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Patternslib training</title>
<script src="https://unpkg.com/@patternslib/[email protected]/dist/bundle.min.js"></script>
</head>
...The latest bundle can be found on the GitHub releases page.
Unter "Assets" you can find a zip file named patternslib-bundle-X.Y.Z.zip.
A bundle can also be found at the Patternslib download site.
You can also build your own bundle by cloning the Patternslib repository from GitHub and following the README instructions.
This offers the greatest flexibility but is an expert option.
You can extend the Patternslib repository, include exactly the patterns you want to include and include your own patterns.
As an example, look at the Mockup repository or at pat-leaflet.
You might want to disable modernizr, which is automatically loaded from the base Patternslib bundle. There is also an useful option to automatically include depending CSS styles from 3rd party addons. This config must be loaded before the Patternslib bundle.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Patternslib training</title>
<script>
window.__patternslib_disable_modernizr = true;
window.__patternslib_import_styles = true;
</script>
<script src="https://cdn.jsdelivr.net/npm/@patternslib/[email protected]/dist/bundle.min.js"></script>
</head>
...Since the integration of the Webpack Module Federation feature you can directly integrate other patterns without loading shared resoruces like jQuery twice. For more information visit the Patternslib documentaion on Webpack Module Federation.
To integrate another bundle, you can add the bundle's remote.min.js file. This is an example integrating pat-leaflet:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Patternslib training</title>
<script>
window.__patternslib_disable_modernizr = true;
window.__patternslib_import_styles = true;
</script>
<script src="https://cdn.jsdelivr.net/npm/@patternslib/[email protected]/dist/bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@patternslib/[email protected]/dist/remote.min.js"></script>
</head>
...<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Integrating Patternslib</title>
<script>
window.__patternslib_disable_modernizr = true;
window.__patternslib_import_styles = true;
</script>
<script src="https://cdn.jsdelivr.net/npm/@patternslib/[email protected]/dist/bundle.min.js"></script>
</head>
<body>
<button
class="pat-toggle"
data-pat-toggle="selector: body; value: dark bright; store: session"
>
Change theme
</button>
<style>
body.dark {
background: #333;
color: #FFF;
}
</style>
</body>
</html>Demo:
Change theme
<style> body.dark { background: #333; color: #FFF; } </style>Patterns are configured via data attributes and in some cases by extra classes.
In the example above, the configuration is done via the data-pat-toggle attribute.
The configuration syntax is inspired by the CSS syntax. Boolean values are supported but avoided, as they also do not exist in CSS. Everything should be as simple as possible.
The configuration is also aquired from parent elements. Consider the following example:
Patternslib helps you out where CSS isn't enough. That's at least the basic idea - but there are also bigger Patterns which provide rich UIs for different purposes like text editors or mapping libraries.
Let's see how the toggle pattern can help us to create a simple accordion:
While we're already at the toggle pattern, let's finish it up.
We can also toggle attributes with pat-toggle.
Let's show/hide an element via the hidden attribute.
You can find more information on the individual Patterns of Patternslib at: https://patternslib.com/
For example, the toggle Pattern is documented here: https://patternslib.com/demos/toggle
The Patternslib repository can be found here: https://github.com/patternslib/patterns