C-Switcher JS

c-switcher allows you to define various modes as attributes and provides functions to easily switch between them.

Table of contents

• Install
  • cdn
• Examples
• Documents

Quick start

installing

Using npm:

$ npm install c-switcher-js

Once the package is installed, you can import the library using import or require approach:

import {CSW} from 'c-switcher-js';

cdn

Using jsDelivr CDN:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cswitcher.min.js"></script>

Using unpkg CDN:

<script src="https://unpkg.com/[email protected]/dist/cswitcher.min.js"></script>

Examples

Switching between custom modes

<nav class="navbar" id="navbar" data-csm-floating="bg-white" data-csm-fixed="bg-transparent"></nav>

CSW.switch({
    element: document.getElementById('navbar'),
    mode: 'fixed', // Switching to 'fixed' mode
    switch_children: false // Enables switching for navbar children elements which have data-csm attributes.
})

After calling switch:

<nav class="navbar bg-transparent" id="navbar" data-csm-floating="bg-white" data-csm-fixed="bg-transparent"></nav>

check out the full example in tests/sticky-header directory

Documents

switch

switching between modes

CSW.switch({
    element: HTMLElement,
    mode: string,
    switch_children: boolean
})