WEB DEVELOPER SITE
TUTORIALS HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML


 

Ionic - Toggle


two options available for the users. The most efficient way to handle this situation is through toggle forms.

Using Toggle

First, we need to create a label for the same reason we explained in the previous chapter and assign a ME class to it.
<label class = "ME">
    <input type = "checkbox" />
    <div class = "track">
        <div class = "handle"></div>
    </div>
</label>

<br>

<label class = "ME">
    <input type = "checkbox" />
    <div class = "track">
        <div class = "handle"></div>
    </div>
</label>

Inside our label will be created . You will notice two more ionic classes used in the following example. The track class will add background styling to our checkbox and color animation when the toggle is tapped.

Multiple Toggles

The class that is used for multiple toggles is the item-toggle. The next example shows how to create a list for toggles. The first one and the second one are checked.
<<ul class = "list">
    <li class = "item item-ME">
        ME 1
        <label class = "ME">
            <input type = "checkbox" />
            <div class = "track">
                <div class = "handle"></div>
            </div>
        </label>
    </li>

    <li class = "item item-ME">
        ME 2
        <label class = "ME">
            <input type = "checkbox" />
            <div class = "track">
                <div class = "handle"></div>
            </div>
        </label>
    </li>

    <li class = "item item-ME">
        ME 3
        <label class = "ME">
            <input type = "checkbox" />
            <div class = "track">
                <div class = "handle"></div>
            </div>
        </label>
    </li>

    <li class = "item item-ME">
        ME 4
        <label class = "ME">
            <input type = "checkbox" />
            <div class = "track">
                <div class = "handle"></div>
            </div>
        </label>
    </li>
</ul>

Styling Toggle

All the Ionic color classes can be applied to the toggle element. The Prefix will be the toggle. We will apply this to the label element.
<ul class = "list">
    <li class = "item item-toggle">
        Toggle Light
        <label class = "toggle  toggle-light">
            <input type = "checkbox" />
            <div class = "track">
                <div class = "handle"></div>
            </div>
        </label>
    </li>

    <li class = "item item-toggle">
        Toggle Stable
        <label class = "toggle toggle-stable">
            <input type = "checkbox" />
            <div class = "track">
                <div class = "handle"></div>
            </div>
        </label>
    </li>

    <li class = "item item-toggle">
        Toggle Positive
        <label class = "toggle toggle-positive">
            <input type = "checkbox" />
            <div class = "track">
                <div class = "handle"></div>
            </div>
        </label>
    </li>

    <li class = "item item-toggle">
        Toggle Calm
        <label class = "toggle toggle-calm">
            <input type = "checkbox" />
            <div class = "track">
                <div class = "handle"></div>
            </div>
        </label>
    </li>

    <li class = "item item-toggle">
        Toggle Balanced
        <label class = "toggle toggle-balanced">
            <input type = "checkbox" />
            <div class = "track">
                <div class = "handle"></div>
            </div>
        </label>
    </li>

    <li class = "item item-toggle">
        Toggle Energized
        <label class = "toggle toggle-energized">
            <input type = "checkbox" />
            <div class = "track">
                <div class = "handle"></div>
            </div>
        </label>
    </li>

    <li class = "item item-toggle">
        Toggle Assertive
        <label class = "toggle toggle-assertive">
            <input type = "checkbox" />
            <div class = "track">
                <div class = "handle"></div>
            </div>
        </label>
    </li>

    <li class = "item item-toggle">
        Toggle Royal
        <label class = "toggle  toggle-royal">
            <input type = "checkbox" />
            <div class = "track">
                <div class = "handle"></div>
            </div>
        </label>
    </li>

    <li class = "item item-toggle">
        Toggle Dark
        <label class = "toggle toggle-dark">
            <input type = "checkbox" />
            <div class = "track">
                <div class = "handle"></div>
            </div>
        </label>
    </li>
</ul>

Welookups is optimized for learning.Copy right 2018 kumar aditya singh .
All Right Reserved and you agree to have read and accepted our term and condition.
All Rights Reserved.

welookups.com