Form inputs, checkbox, switch, toggle button

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