Scille Toggle Switch (for AngularJS)

Toggle Switches for AngularJS. This library is created by DUBOIS Romain and maintained by the Scille team.

Usage

Registration

To be able to use the directive, you need to register the sc-toggle-switch module as a dependency:

angular.module('yourModule', ['sc-toggle-switch'
    // other dependencies
]);

Directive

The directive can work on both attribute and element levels.

<div sc-toggle-switch-directive
    ng-model="switchModel"
    is-disabled="isDisabled"
    is-summarised="isSummarised"
    is-animated="isAnimated"
    switch-size="{{switchSize}}"
    left-label="{{leftLabel}}"
    right-label="{{rightLabel}}"
    knob-label="{{knobLabel}}"
    left-label-color="{{leftLabelColor}}"
    right-label-color="{{rightLabelColor}}"
    left-value="leftValue"
    right-value="rightValue"
    knob-label-color="{{knobLabelColor}}"
    border-color="{{borderColor}}">
</div>

Note:

ng-model: Will try to bind to the property given by evaluating the expression on the current scope. If the property doesn't already exist on this scope, it will be created implicitly and added to the scope.
is-disabled: Determines if the switch is disabled or not.
is-summarised: Determines if the switch is summarised or not.
is-animated: Determines if the switch animates when toggled.
switch-size: Sets the size class. It can be xsmall, small, medium (as default), large or xlarge.
left-label: Sets the left label text.
right-label: Sets the right label text.
knob-label: Sets the knob label text.
left-label-color: Sets the left label background color.
right-label-color: Sets the right label background color.
left-value: Sets the left position value. It is true as default.
right-value: Sets the right position value. It is false as default.
knob-label-color: Sets the knob label background color.
border-color: Sets the border color.

Demonstration

Switch Value: {{switchModel}}

Default

<div sc-toggle-switch-directive ng-model="switchModel"></div>

Lables Text

<div sc-toggle-switch-directive
    ng-model="switchModel"
    left-label="Yes"
    right-label="No">
</div>

Knob Text

<div sc-toggle-switch-directive
    ng-model="switchModel"
    knob-label="TV">
</div>

Sizes

<div sc-toggle-switch-directive
    ng-model="switchModel"
    switch-size="xsmall">
</div>

<div sc-toggle-switch-directive
    ng-model="switchModel"
    switch-size="small">
</div>

<div sc-toggle-switch-directive
    ng-model="switchModel"
    switch-size="medium">
</div>

<div sc-toggle-switch-directive
    ng-model="switchModel"
    switch-size="large">
</div>

<div sc-toggle-switch-directive
    ng-model="switchModel"
    switch-size="xlarge">
</div>

Resize

<div sc-toggle-switch-directive
    ng-model="switchModel"
    left-label="{{leftLabel}}"
    knob-label="{{knobLabel}}"
    right-label="{{rightLabel}}">
</div>

leftLabel:
knobLabel:
rightLabel:

Colors

<div sc-toggle-switch-directive
    ng-model="switchModel"
    border-color="{{borderColor}}"
    left-label-color="{{leftLabelColor}}"
    knob-label-color="{{knobLabelColor}}"
    right-label-color="{{rightLabelColor}}">
</div>

borderColor:
leftLabelColor:
knobLabelColor:
rightLabelColor:

Animate

<div sc-toggle-switch-directive
    ng-model="switchModel"
    is-animated="{{isAnimated}}">
</div>

isAnimated: {{isAnimated}}

Disabled

<div sc-toggle-switch-directive
    ng-model="switchModel"
    is-disabled="{{isDisabled}}">
</div>

isDisabled: {{isDisabled}}

Summarize

<div sc-toggle-switch-directive
    ng-model="switchModel"
    is-summarised="{{isSummarised}}"
    knob-label="TV">
</div>

<div sc-toggle-switch-directive
    ng-model="switchModel"
    is-summarised="{{isSummarised}}">
</div>

isSummarised: {{isSummarised}}

Labels Value

<div sc-toggle-switch-directive
    ng-model="switchModelValue"
    left-value="{{leftValue}}"
    right-value="{{rightValue}}">
</div>

switchModelValue: {{switchModelValue}}

leftValue:
rightValue:

Contributors

DUBOIS Romain, Engineer R&D at SCILLE romain.dubois@scille.fr

MEZINO Vincent, Engineer R&D at SCILLE vincent.mezino@scille.fr