Form inputs, checkbox, switch, toggle button

Switch

Basic Switch:
Disabled:

Switch colors

Set the css color for the switch to change its color

Switch custom style and size

Set css font-size to change the switch size. Custom css can also be used to change the component's look.
iOS style:
Bigger size:
Icons:
FormInput/Index.cshtml
<h2>Switch</h2>
Basic Switch:
@(Html.Awe().Switch(new SwitchOpt
{
    Name = "switch1",
    Value = true
}))

Disabled:
@Html.Awe().Switch(new SwitchOpt { Name = "switchDisb", Enabled = false, Value = true })
@Html.Awe().Switch(new SwitchOpt { Name = "switchDisb2", Enabled = false })

<h2>Switch colors</h2>
<div class="expl">Set the css color for the switch to change its color</div>
@(Html.Awe().Switch(new SwitchOpt
{
    Name = "switchColor1",
    Value = true,
    FieldAttr = new { style = "color: #ca19d2" }
}))

@(Html.Awe().Switch(new SwitchOpt
{
    Name = "switchColor2",
    Value = true,
    FieldAttr = new { style = "color: orange" }
}))

@(Html.Awe().Switch(new SwitchOpt
{
    Name = "switchColor3",
    Value = true,
    FieldAttr = new { style = "color: #b3e038" }
}))

<h2>Switch custom style and size</h2>
<div class="expl">Set css font-size to change the switch size. Custom css can also be used to change the component's look.</div>
<div class="efield">
iOS style:
@(Html.Awe().Switch(new SwitchOpt
{
    Name = "switchIos",
    Value = true,
    CssClass = "ios-switch"
}))
</div>
<div class="efield">
Bigger size:
@(Html.Awe().Switch(new SwitchOpt
{
    Name = "switchBig1",
    Value = true,
    FieldAttr = new { style = "font-size: 1.5em" }
}))

@(Html.Awe().Switch(new SwitchOpt
{
    Name = "switchIosBig1",
    Value = true,
    CssClass = "ios-switch",
    FieldAttr = new { style = "font-size: 1.5em" }
}))
</div>
<link rel="stylesheet" href="~/css/comp/ios-switch.css" />
<div class="efield">
    Icons:
    @(Html.Awe().Switch(new SwitchOpt
    {
        Name = "switchIosBig2",
        Value = true,
        CssClass = "ios-switch lightSwitch",
        FieldAttr = new { style = "font-size: 1.5em" }
    }))
</div>
<style>
    .lightSwitch .o-switch-inth {
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/%3E%3C/svg%3E");
        mask-size: 100% 100%;
        background-color: black;
    }

    .lightSwitch .o-chked .o-switch-inth {
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/%3E%3C/svg%3E");
        background-color: currentColor;
    }
</style>

Checkbox

FormInput/Index.cshtml
<div class="efield">
    <label>
        @Html.Awe().CheckBox(new CheckBoxOpt { Name = "chk1", Value = true })
        <span class="o-con">Checkbox</span>
    </label>
</div>
<div class="efield">
    <label>
        @Html.Awe().CheckBox(new CheckBoxOpt { Name = "chk2", Enabled = false, Value = true })
        <span class="o-con">Disabled</span>
    </label>
</div>
<div class="efield">
    <label>
        @Html.Awe().CheckBox(new CheckBoxOpt { Name = "chk5", Enabled = false })
        <span class="o-con">Disabled</span>
    </label>
</div>

Toggle button

FormInput/Index.cshtml
<div class="efield">
    <label>
        @Html.Awe().Toggle(new ToggleOpt { Name = "chk6", Value = true })
        <span class="o-con">Checkbox</span>
    </label>
</div>
<div class="efield">
    <label>
        @Html.Awe().Toggle(
                 new ToggleOpt
        {
            Name = "chk7",
            Enabled = false,
            Value = true
        })
        <span class="o-con">Disabled</span>
    </label>
</div>
<div class="efield">
    <label>
        @Html.Awe().Toggle(new ToggleOpt { Name = "chk8", Enabled = false })
        <span class="o-con">Disabled</span>
    </label>
</div>
<div class="efield">
    <label>
        @Html.Awe().Toggle(
                 new ToggleOpt
        {
            Name = "chk9",
            Width = "7em",
            Yes = "Enabled",
            No = "Disabled",
            Value = true
        })
        <span class="o-con">with width, yes and no set</span>
    </label>
</div>
<div class="efield">
    <button type="button" class="awe-btn" onclick="toggleAll()">toggle enabled</button>
</div>
<script>
    function toggleEnable(c) {
        var o = c.data('o');
        o.api.enable(!o.enb);
    }

    function toggleAll() {
        toggleEnable($('#chk6'));
        toggleEnable($('#chk7'));
        toggleEnable($('#chk8'));
        toggleEnable($('#chk9'));
    }
</script>

Button

FormInput/Index.cshtml
@Html.Awe().Button(new ButtonOpt { Text = "button" })
@Html.Awe().Button(new ButtonOpt { Text = "primary", CssClass = "awe-btnp" })
@Html.Awe().Button(new ButtonOpt { Text = "disabled", Enabled = false })



 Comments