3
7
  1. Dashboard
  2. Components
  3. Bootstrap Toggle
Bootstrap 4 Toggle (Switches)

  • Bootstrap 4 Toggle is a jQuery plugin/widget that converts plain checkboxes into responsive toggle switch buttons. Project was forked from original Bootstrap Toggle by Min Hur at http://www.bootstraptoggle.com/

    For more information and documentation on Bootstrap 4 Toggle visit https://gitbrent.github.io/bootstrap4-toggle/

  • Default Switches

    Simply add data-toggle="toggle" to convert checkboxes into toggles.

    Outline Switches

    data-onstyle="outline-*" and data-offstyle="outline-*"

    Sizes

    Apply size to switch with data-size="lg", data-size="sm", data-size="xs"

    Custom Sizes

    Apply custom sizes with data-width and data-height options.

    Custom Text

    Apply text to switch with data-on and data-off

    HTML, Icons, Images

    You can easily add icons or images since html is supported for on/off text.

    Multiple Lines of Text

    Toggles with multiple lines will adjust its heights.

    Stacked Switches

    Wrap checkboxes in .form-check for stackable switches.

    Inline Switches

    Add the .form-check-inline class to the .form-check wrapper for inline switches. Use data-style="mr-*" for spacing between switch.

    Animation Speed

    Apply data-style="speed-slow" or data-style="speed-fast" option for animation speed.

    • Options

    Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-on="Enabled".

    Name Type Default Description
    on string|html "On" Text of the on toggle label.
    off string|html "Off" Text of the off toggle label.
    onstyle string "primary" Style of the on toggle.
    offstyle string "light" Style of the off toggle.
    size string null Size of the toggle. If set to null, button is default/normal size.
    Possible values are: lg, sm, xs
    style string null Appends the provided value to the toggle's class attribute. Use this to apply custom styles to the toggle.
    width integer null Sets the width of the toggle.
    If set to null, width will be calculated.
    height integer null Sets the height of the toggle.
    If set to null, height will be calculated.
    Methods

    Methods can be used to control toggles directly.

    Method Example Description
    initialize $('#toggle-demo').bootstrapToggle() Initializes the toggle plugin with options
    destroy $('#toggle-demo').bootstrapToggle('destroy') Destroys the toggle
    on $('#toggle-demo').bootstrapToggle('on') Sets the toggle to 'On' state
    off $('#toggle-demo').bootstrapToggle('off') Sets the toggle to 'Off' state
    toggle $('#toggle-demo').bootstrapToggle('toggle') Toggles the state of the toggle
    enable $('#toggle-demo').bootstrapToggle('enable') Enables the toggle
    disable $('#toggle-demo').bootstrapToggle('disable') Disables the toggle
    Event Propagation

    Note All events are propagated to and from input element to the toggle. You should listen to events from the <input type="checkbox"> directly rather than look for custom events.

    $('#toggle-event').change(function() { //Do something } );

siQtheme License Github siQtheme NPM siQtheme

Copyright © 2019-2020 siQtheme by 3M Square. All rights reserved.