re-frame Bootstrap Toggle

Bootstrap Toggle is a flexible Bootstrap plugin that converts checkboxes into toggles. This is fully reactive rewrite of the JavaScript part for re-frame. It doesn't use checkboxes and of course no jQuery! And actually, it doesn't even depend on re-frame, it should work in any Reagent app.

Visit http://www.bootstraptoggle.com for demos of the abilities.

Getting Started

Installation

Add this to your dependencies:

[re-frame-bootstrap-toggle "0.2.0"]

Also, you need to include a stylesheet from the css directory.

Usage

(ns your.re-frame.app
  (:require [re-frame.core :refer [subscribe dispatch]]
            [re-frame-bootstrap-toggle.core :refer [toggle]]))

(defn view []
  (let [state (subscribe [:toggle-state])]
    (fn []
      [toggle {:checked @toggle-state
               :on-click #(dispatch [:toggle-the-toggle])}])))

Options

You can pass additional options along with :checked and :on-click:

Name	Type	Default	Description
:on	string or hiccup	"On"	Label of the on toggle
:off	string or hiccup	"Off"	Label of the off toggle
:onstyle	string	"primary"	Style of the on toggle. Possible values are the button classes without the leading btn-, such as "info" or "warning"
:offstyle	string	"default"	Same as :onstyle, but for the off toggle
:width	integer	nil	Sets the width of the toggle. If set to nil, width will be calculated.
:height	integer	nil	Sets the height of the toggle. If set to nil, height will be calculated.

The following options are not yet supported, but patches are welcome!

Name	Type	Default	Description
:size	string	"normal"	Size of the toggle. Possible values are "large", "normal", "small", "mini".
:style	string		Appends the value to the class attribute of the toggle. This can be used to apply custom styles. Refer to Custom Styles for reference.

But I need the checkbox!

While the checkbox introduces some state issues, it's no biggy to just add them yourself in case you want to submit the state in a form. You probably want to add a hidden field.

(defn view []
  (let [state (subscribe [:toggle-state])]
    (fn []
      [:div
        [toggle {:checked @toggle-state
                 :on-click #(dispatch [:toggle-the-toggle])}]
        [:input {:type "hidden"
                 :name "toggle"
                 :value (if @toggle-state "on" "off")}])))

Usage with Bootstrap 4

We use Bootstrap 3.3, but it seems pretty strait forward to use with Bootstrap 4 as well. First you have to set the :offstyle, since the btn-default css class was renamed to btn-secondary. Then you need to include the css rules mentioned in this GitHub issue.

Release

Run

lein deploy clojars