Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @baianat/switcher with all npm packages installed. Try it out:

var switcher = require("@baianat/switcher")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@baianat/switcher v0.0.1

Switcher

ES6 extension to add a dragging behavior to the Base framework switcher component.

Getting Started

Installation

You can install modal as part of base.extensions.

npm install @baianat/base.extensions

# or using yarn
yarn add @baianat/base.extensions

If you want the standalone version.

npm install @baianat/switcher

yarn add @baianat/switcher

Include necessary files

<head>
  <!-- if you are using base.framework -->
  <link rel="stylesheet" href="@baianat/base.framework/dist/css/base.css">

  <!-- if you want only switcher stylesheet -->
  <link rel="stylesheet" href="@baianat/modal/dist/css/switcher.css">
</head>
<body>
    ...
    <script type="text/javascript" src="dist/js/switcher.js"></script>
</body>

HTML Layout

  • .switcher
    • .switcher-input
    • .switcher-body
      • .switcher-handle
<div class="switcher">
   <input id="switcher" type="checkbox" checked="checked" class="switcher-input">
   <label for="switcher" class="switcher-body">
      <span class="switcher-handle"></span>
  </label>
</div>

Once you include the script file, it will search for an element with .switcher class and adds the dragging behavior to it.

License

MIT

Copyright (c) 2017 Baianat

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free