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