pure CSS tabs (https://collectorium.oberlehner.net).
To use collectorium in your Sass project, it is recommended to use the node-sass-magic-importer node-sass importer so it is possible to easily load collectorium directly from your node_modules directory.
Make sure you checkout the usage section on how to use the node-sass-magic-importer.
Install collectorium:
npm install collectorium --saveAlso install node-sass-magic-importer
npm install node-sass-magic-importer --save-devNow you can import collectorium into your Sass file:
@import '~collectorium';
// Without node-sass-magic-importer installed
@import 'node_modules/collectorium/scss/index.scss';There are variables to control certain aspects of the tabs:
$collectorium-tab-link-background: #efefef;
$collectorium-contents-background: #efefef;If you want to use the JavaScript enhancements, load the collectorium module into your JavaScript file:
// Load the module.
const collectorium = require('collectorium');
// Initialize collectorium tabs.
collectorium('.collectorium', {
// This are the default options.
disableHistory: true,
classNames: {
link: `collectorium__tab-link`,
content: `collectorium__content`,
active: 'is-active'
}
});Download https://github.com/maoberlehner/collectorium/archive/2.0.0.zip. Add the files to your HTML file like in the following example:
<!-- Put this inside the <head> section of your HTML. -->
<link rel="stylesheet" href="collectorium.min.css">
<!-- Put this before the closing </body> tag (optionally!). -->
<script src="collectorium.min.js"></script>
<script>
collectorium('.collectorium');
</script>Markus Oberlehner
Website: https://markus.oberlehner.net
Twitter: https://twitter.com/MaOberlehner
PayPal.me: https://paypal.me/maoberlehner
Patreon: https://www.patreon.com/maoberlehner
MIT