SlideToggle

SlideToggle field is a variation of Checkbox with a sliding toggle instead of box with check mark. It wraps <input type="checkbox">. Color can be specified, and you can optionally configure text to display in a label to the right of the toggle in addition to a standard field label.

Slide toggle
//<code-header>
fiddle.title = 'Slide toggle';
//</code-header>
// Using default look
new SlideToggle({
    appendTo : targetElement,
    text     : 'Off'
});

// Using default look
new SlideToggle({
    appendTo : targetElement,
    checked  : true,
    text     : 'On'
});

// Using green color
new SlideToggle({
    appendTo : targetElement,
    color    : 'b-green',
    checked  : true,
    text     : 'Green'
});

// Using orange color, initially checked
new SlideToggle({
    appendTo : targetElement,
    color    : 'b-orange',
    checked  : true,
    text     : 'Orange'
});

// Starting disabled
new SlideToggle({
    appendTo : targetElement,
    disabled : true,
    text     : 'Disabled (Off)'
});

// Starting disabled
new SlideToggle({
    appendTo : targetElement,
    disabled : true,
    text     : 'Disabled (On)',
    checked  : true
});

This field can be used as an editor for the Column.

Configs

112

Common

listenersEvents

Accessibility

ariaLabelWidget
keyMapKeyMap

Container

inlineField

CSS

clsWidget
htmlClsWidget
styleWidget
uiWidget

DOM

adoptWidget
appendToWidget
contentWidget
datasetWidget
htmlWidget
idWidget
tagWidget
titleWidget

Float & align

alignWidget
anchorWidget
centeredWidget
draggableWidget
floatingWidget
xWidget
yWidget

Input element

Label

hintField
labelLabelable
labelClsLabelable
labelPositionLabelable
labelsField
labelWidthLabelable

Layout

alignSelfWidget
dockWidget
flexWidget
heightWidget
hiddenWidget
marginWidget
maxHeightWidget
maxWidthWidget
minHeightWidget
minWidthWidget
textAlignWidget
weightWidget
widthWidget

Misc

badgeBadge
dataFieldWidget
disabledWidget
localeClassLocalizable
localizableLocalizable
maskedWidget
ownerWidget
refWidget
rippleWidget
tabWidget
tooltipWidget

Other

autoCollapseCheckbox
checkedCheckbox
checkedValueCheckbox
colorCheckbox
columnWidget
nameField
rtlRTL
spanWidget
textCheckbox
valueCheckbox

Scrolling

Properties

85

Class hierarchy

isSlideToggle: Boolean= truereadonly
Identifies an object as an instance of SlideToggle class, or subclass thereof.
isSlideToggle: Boolean= truereadonlystatic
Identifies an object as an instance of SlideToggle class, or subclass thereof.
isBadgeBadge
isCheckboxCheckbox
isDelayableDelayable
isEventsEvents
isFieldField
isKeyMapKeyMap
isLabelableLabelable
isLocalizableLocalizable
isValidatableValidatable
isWidgetWidget

Accessibility

keyMapKeyMap

CSS

clsWidget

DOM

appendToWidget
contentWidget
datasetWidget
elementWidget
htmlWidget
idWidget
styleWidget

Float & align

xWidget
yWidget

Layout

alignSelfWidget
flexWidget
heightWidget
marginWidget
maxHeightWidget
maxWidthWidget
minHeightWidget
minWidthWidget
widthWidget

Lifecycle

configBase

Misc

badgeBadge
cellInfoWidget
disabledWidget
errorTipValidatable
labelLabelable
localeHelperLocalizable
localeManagerLocalizable
refWidget
tabWidget
tooltipWidget

Other

$namestaticWidget
checkedCheckbox
columnWidget
inputField
isEmptyField
isValidField
nameCheckbox
rtlRTL
spanWidget
typestaticWidget
valueCheckbox

Visibility

hiddenWidget
isVisibleWidget

Widget hierarchy

ownerWidget
parentWidget

Functions

67

Configuration

applyDefaultsstaticBase

Events

Float & align

alignToWidget
setXYWidget
showByWidget
toFrontWidget

Lifecycle

createstaticWidget
destroystaticBase
initClassstaticWidget

Misc

attachTooltipstaticWidget
fromElementstaticWidget
fromSelectorstaticWidget
getByIdstaticWidget
isOfTypeNamestaticBase
mixinstaticBase
optionalLstaticLocalizable

Other

checkCheckbox
clearField
clearErrorValidatable
composeWidget
createOnFrameDelayable
disableWidget
enableWidget
focusWidget
getErrorsValidatable
LstaticLocalizable
maskWidget
onEvents
recomposeWidget
relayAllEvents
selectField
setErrorValidatable
toggleCheckbox
triggerEvents
unEvents
uncheckCheckbox
unmaskWidget

Visibility

hideWidget
showWidget

Widget hierarchy

closestWidget
containsWidget
ownsWidget
queryWidget
queryAllWidget
upWidget

Events

21
actionCheckbox
beforeChangeCheckbox
catchAllEvents
changeCheckbox
clearField
clickCheckbox
destroyEvents
focusInWidget
focusOutWidget
hideWidget
inputField
paintWidget
readOnlyWidget
recomposeWidget
resizeWidget
showWidget
triggerField

Event handlers

21

Typedefs

7

CSS variables

93
NameDescription
--b-slide-toggle-border-widthSlideToggle border-width
--b-slide-toggle-widthSlideToggle width
--b-slide-toggle-heightSlideToggle height
--b-slide-toggle-thumb-sizeSlideToggle thumb size (unchecked)
--b-slide-toggle-border-radiusSlideToggle border-radius
--b-slide-toggle-thumb-offsetThumb offset from the start (left)
--b-slide-toggle-font-sizeSlideToggle font-size
--b-slide-toggle-inner-gapGap between SlideToggle and its text
--b-slide-toggle-label-before-paddingLabel padding when displayed before the SlideToggle
--b-slide-toggle-ring-colorRing color (used by material)
--b-slide-toggle-focus-outline-widthFocus outline width
--b-slide-toggle-focus-outline-offsetFocus outline offset
--b-slide-toggle-thumb-borderThumb border
--b-slide-toggle-thumb-colorThumb color
--b-slide-toggle-thumb-backgroundThumb background
--b-slide-toggle-backgroundBackground
--b-slide-toggle-border-colorBorder color
--b-slide-toggle-focus-outline-colorFocus outline color
Checked
--b-slide-toggle-checked-thumb-sizeSlideToggle checked thumb size
--b-slide-toggle-checked-thumb-borderThumb background when checked
--b-slide-toggle-checked-thumb-backgroundThumb background when checked
--b-slide-toggle-checked-border-colorBorder color when checked
--b-slide-toggle-checked-ring-colorRing color when checked (used by material)
--b-slide-toggle-checked-thumb-offsetThumb offset when checked
--b-slide-toggle-checked-hovered-thumb-backgroundThumb background when checked and hovered
--b-slide-toggle-checked-backgroundBackground when checked
--b-slide-toggle-checked-hover-backgroundBackground when checked and hovered
Disabled
--b-slide-toggle-disabled-opacityOpacity when disabled
--b-slide-toggle-disabled-backgroundBackground when disabled
--b-slide-toggle-disabled-thumb-backgroundThumb background when disabled
Hovered
--b-slide-toggle-hovered-thumb-backgroundThumb background when hovered

Inherited