mirror of https://github.com/abpframework/abp
Yunus Emre Kalkan
6 years ago
parent
d5a69b1f9c
commit
edb70e054b
@ -0,0 +1,465 @@
|
||||
@page
|
||||
@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components
|
||||
@model FormElementsModel
|
||||
|
||||
@{
|
||||
ViewData["Title"] = "Form Elements";
|
||||
}
|
||||
|
||||
@section styles {
|
||||
<abp-style-bundle>
|
||||
<abp-style src="/css/demo.css" />
|
||||
</abp-style-bundle>
|
||||
}
|
||||
|
||||
@section scripts {
|
||||
<abp-script-bundle>
|
||||
@*<abp-script src="/libs/highlight.js/lib/highlight.js" />
|
||||
<abp-script src="/Pages/Components/highlightCode.js" />*@
|
||||
</abp-script-bundle>
|
||||
}
|
||||
|
||||
<link rel="stylesheet"
|
||||
href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css">
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
|
||||
<script>hljs.initHighlightingOnLoad();</script>
|
||||
|
||||
|
||||
|
||||
<h2>Form Elements</h2>
|
||||
|
||||
<h4>Example</h4>
|
||||
|
||||
<div class="demo-with-code">
|
||||
<div class="demo-area">
|
||||
<abp-input asp-for="@Model.MyModel.Name" label="Name"/>
|
||||
<abp-input asp-for="@Model.MyModel.Password" label="Password" />
|
||||
<abp-input asp-for="@Model.MyModel.CheckMeOut" label="Check Me Out" />
|
||||
</div>
|
||||
<div class="code-area">
|
||||
<abp-tabs>
|
||||
<abp-tab title="Modal Class">
|
||||
<pre><code>
|
||||
public class FormElementsModel : PageModel
|
||||
{
|
||||
public SampleModel MyModel { get; set; }
|
||||
|
||||
public void OnGet()
|
||||
{
|
||||
MyModel = new SampleModel();
|
||||
}
|
||||
|
||||
public class SampleModel
|
||||
{
|
||||
[Required]
|
||||
public string Name { get; set; }
|
||||
|
||||
[Required]
|
||||
[DataType(DataType.Password)]
|
||||
public string Password { get; set; }
|
||||
|
||||
public bool CheckMeOut { get; set; }
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
</abp-tab>
|
||||
<abp-tab title="Tag Helper" active="true">
|
||||
<pre><code>
|
||||
<abp-input asp-for="@@Model.MyModel.Name" label="Name"/>
|
||||
<abp-input asp-for="@@Model.MyModel.Password" label="Password" />
|
||||
<abp-input asp-for="@@Model.MyModel.CheckMeOut" label="Check Me Out" />
|
||||
</code></pre>
|
||||
</abp-tab>
|
||||
<abp-tab title="Rendered">
|
||||
<pre><code>
|
||||
<div class="form-group">
|
||||
<label for="MyModel_Name">Name</label>
|
||||
<input type="text" data-val="true" data-val-required="The Name field is required." id="MyModel_Name" name="MyModel.Name" value="" class="form-control ">
|
||||
<span class="text-danger field-validation-valid" data-valmsg-for="MyModel.Name" data-valmsg-replace="true"></span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="MyModel_Password">Password</label>
|
||||
<input type="password" data-val="true" data-val-required="The Password field is required." id="MyModel_Password" name="MyModel.Password" class="form-control ">
|
||||
<span class="text-danger field-validation-valid" data-valmsg-for="MyModel.Password" data-valmsg-replace="true"></span>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input type="checkbox" data-val="true" data-val-required="The CheckMeOut field is required." id="MyModel_CheckMeOut" name="MyModel.CheckMeOut" value="true" class="form-check-input "><input name="MyModel.CheckMeOut" type="hidden" value="false">
|
||||
<label class="form-check-label" for="MyModel_CheckMeOut">Check Me Out</label>
|
||||
</div>
|
||||
</code></pre>
|
||||
</abp-tab>
|
||||
</abp-tabs>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>Form controls</h4>
|
||||
|
||||
<div class="demo-with-code">
|
||||
<div class="demo-area">
|
||||
<abp-input asp-for="@Model.MyModel.EmailAddress" label="Email Address" placeholder="name@example.com" />
|
||||
<abp-select asp-for="@Model.MyModel.City" asp-items="@Model.CityList" label="City" />
|
||||
<abp-select asp-for="@Model.MyModel.Cities" asp-items="@Model.CityList" label="Cities" />
|
||||
<abp-input asp-for="@Model.MyModel.Description" label="Description" />
|
||||
</div>
|
||||
<div class="code-area">
|
||||
<abp-tabs>
|
||||
<abp-tab title="Modal Class">
|
||||
<pre><code>
|
||||
public class FormElementsModel : PageModel
|
||||
{
|
||||
public SampleModel MyModel { get; set; }
|
||||
|
||||
public List<SelectListItem> CityList { get; set; } = new List<SelectListItem>
|
||||
{
|
||||
new SelectListItem { Value = "NY", Text = "New York"},
|
||||
new SelectListItem { Value = "LDN", Text = "London"},
|
||||
new SelectListItem { Value = "IST", Text = "Istanbul"},
|
||||
new SelectListItem { Value = "MOS", Text = "Moscow"}
|
||||
};
|
||||
|
||||
public void OnGet()
|
||||
{
|
||||
MyModel = new SampleModel();
|
||||
}
|
||||
|
||||
public class SampleModel
|
||||
{
|
||||
[Required]
|
||||
public string EmailAddress { get; set; }
|
||||
|
||||
public string City { get; set; }
|
||||
|
||||
public List<string> Cities { get; set; }
|
||||
|
||||
[TextArea]
|
||||
public string Description { get; set; }
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
</abp-tab>
|
||||
<abp-tab title="Tag Helper" active="true">
|
||||
<pre><code>
|
||||
<abp-input asp-for="@@Model.MyModel.EmailAddress" label="Email Address" placeholder="name@example.com" />
|
||||
<abp-select asp-for="@@Model.MyModel.City" asp-items="@@Model.CityList" label="City" />
|
||||
<abp-select asp-for="@@Model.MyModel.Cities" asp-items="@@Model.CityList" label="Cities" />
|
||||
<abp-input asp-for="@@Model.MyModel.Description" label="Description" />
|
||||
</code></pre>
|
||||
</abp-tab>
|
||||
<abp-tab title="Rendered">
|
||||
<pre><code>
|
||||
<div class="form-group">
|
||||
<label for="MyModel_EmailAddress">Email Address</label>
|
||||
<input placeholder="name@example.com" type="text" data-val="true" data-val-required="The EmailAddress field is required." id="MyModel_EmailAddress" name="MyModel.EmailAddress" value="" class="form-control ">
|
||||
<span class="text-danger field-validation-valid" data-valmsg-for="MyModel.EmailAddress" data-valmsg-replace="true"></span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="MyModel_City">City</label>
|
||||
<select id="MyModel_City" name="MyModel.City" class="form-control">
|
||||
<option value="NY">New York</option>
|
||||
<option value="LDN">London</option>
|
||||
<option value="IST">Istanbul</option>
|
||||
<option value="MOS">Moscow</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="MyModel_Cities">Cities</label>
|
||||
<select id="MyModel_Cities" multiple="multiple" name="MyModel.Cities" class="form-control">
|
||||
<option value="NY">New York</option>
|
||||
<option value="LDN">London</option>
|
||||
<option value="IST">Istanbul</option>
|
||||
<option value="MOS">Moscow</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="MyModel_Description">Description</label>
|
||||
<textarea id="MyModel_Description" name="MyModel.Description" class="form-control "></textarea>
|
||||
<span class="text-danger field-validation-valid" data-valmsg-for="MyModel.Description" data-valmsg-replace="true"></span>
|
||||
</div>
|
||||
</code></pre>
|
||||
</abp-tab>
|
||||
</abp-tabs>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>Sizing</h4>
|
||||
|
||||
<div class="demo-with-code">
|
||||
<div class="demo-area">
|
||||
<abp-input asp-for="@Model.MyModel.LargeInput" size="Large" />
|
||||
<abp-input asp-for="@Model.MyModel.SmallInput" size="Small" />
|
||||
</div>
|
||||
<div class="code-area">
|
||||
<abp-tabs>
|
||||
<abp-tab title="Modal Class">
|
||||
<pre><code>
|
||||
public class FormElementsModel : PageModel
|
||||
{
|
||||
public SampleModel MyModel { get; set; }
|
||||
|
||||
public void OnGet()
|
||||
{
|
||||
MyModel = new SampleModel();
|
||||
}
|
||||
|
||||
public class SampleModel
|
||||
{
|
||||
public string LargeInput { get; set; }
|
||||
|
||||
public string SmallInput { get; set; }
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
</abp-tab>
|
||||
<abp-tab title="Tag Helper" active="true">
|
||||
<pre><code>
|
||||
<abp-input asp-for="@@Model.MyModel.LargeInput" size="Large" />
|
||||
<abp-input asp-for="@@Model.MyModel.SmallInput" size="Small" />
|
||||
</code></pre>
|
||||
</abp-tab>
|
||||
<abp-tab title="Rendered">
|
||||
<pre><code>
|
||||
<div class="form-group">
|
||||
<label for="MyModel_LargeInput">LargeInput</label>
|
||||
<input type="text" id="MyModel_LargeInput" name="MyModel.LargeInput" value="" class="form-control form-control-lg">
|
||||
<span class="text-danger field-validation-valid" data-valmsg-for="MyModel.LargeInput" data-valmsg-replace="true"></span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="MyModel_SmallInput">SmallInput</label>
|
||||
<input type="text" id="MyModel_SmallInput" name="MyModel.SmallInput" value="" class="form-control form-control-sm">
|
||||
<span class="text-danger field-validation-valid" data-valmsg-for="MyModel.SmallInput" data-valmsg-replace="true"></span>
|
||||
</div>
|
||||
</code></pre>
|
||||
</abp-tab>
|
||||
</abp-tabs>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>Disabled And ReadOnly</h4>
|
||||
|
||||
<div class="demo-with-code">
|
||||
<div class="demo-area">
|
||||
<abp-input asp-for="@Model.MyModel.SampleInput0" disabled="true" />
|
||||
<abp-input asp-for="@Model.MyModel.SampleInput1" readonly="True" />
|
||||
<abp-input asp-for="@Model.MyModel.SampleInput2" readonly="True_PlainText"/>
|
||||
</div>
|
||||
<div class="code-area">
|
||||
<abp-tabs>
|
||||
<abp-tab title="Modal Class">
|
||||
<pre><code>
|
||||
public class FormElementsModel : PageModel
|
||||
{
|
||||
public SampleModel MyModel { get; set; }
|
||||
|
||||
public void OnGet()
|
||||
{
|
||||
MyModel = new SampleModel();
|
||||
MyModel.SampleInput0 = "This is a disabled input.";
|
||||
MyModel.SampleInput0 = "This is a disabled input.";
|
||||
MyModel.SampleInput1 = "This is a readonly input.";
|
||||
MyModel.SampleInput2 = "This is a readonly plain-text.";
|
||||
}
|
||||
|
||||
public class SampleModel
|
||||
{
|
||||
public string SampleInput0 { get; set; }
|
||||
|
||||
public string SampleInput1 { get; set; }
|
||||
|
||||
public string SampleInput2 { get; set; }
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
</abp-tab>
|
||||
<abp-tab title="Tag Helper" active="true">
|
||||
<pre><code>
|
||||
<abp-input asp-for="@@Model.MyModel.SampleInput0" disabled="true" />
|
||||
<abp-input asp-for="@@Model.MyModel.SampleInput1" readonly="True" />
|
||||
<abp-input asp-for="@@Model.MyModel.SampleInput2" readonly="True_PlainText"/>
|
||||
</code></pre>
|
||||
</abp-tab>
|
||||
<abp-tab title="Rendered">
|
||||
<pre><code>
|
||||
<div class="form-group">
|
||||
<label for="MyModel_SampleInput0">SampleInput0</label>
|
||||
<input type="text" id="MyModel_SampleInput0" name="MyModel.SampleInput0" value="This is a disabled input." disabled="" class="form-control ">
|
||||
<span class="text-danger field-validation-valid" data-valmsg-for="MyModel.SampleInput0" data-valmsg-replace="true"></span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="MyModel_SampleInput1">SampleInput1</label>
|
||||
<input type="text" id="MyModel_SampleInput1" name="MyModel.SampleInput1" value="This is a readonly input." class="form-control " readonly="">
|
||||
<span class="text-danger field-validation-valid" data-valmsg-for="MyModel.SampleInput1" data-valmsg-replace="true"></span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="MyModel_SampleInput2">SampleInput2</label>
|
||||
<input type="text" id="MyModel_SampleInput2" name="MyModel.SampleInput2" value="This is a readonly plain-text." class="form-control-plaintext " readonly="">
|
||||
<span class="text-danger field-validation-valid" data-valmsg-for="MyModel.SampleInput2" data-valmsg-replace="true"></span>
|
||||
</div>
|
||||
</code></pre>
|
||||
</abp-tab>
|
||||
</abp-tabs>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>Checkboxes and radios</h4>
|
||||
|
||||
<div class="demo-with-code">
|
||||
<div class="demo-area">
|
||||
<abp-input asp-for="@Model.MyModel.DefaultCheckbox"/>
|
||||
<abp-input asp-for="@Model.MyModel.DisabledCheckbox" disabled="true"/>
|
||||
</div>
|
||||
<div class="code-area">
|
||||
<abp-tabs>
|
||||
<abp-tab title="Modal Class">
|
||||
<pre><code>
|
||||
public class FormElementsModel : PageModel
|
||||
{
|
||||
public SampleModel MyModel { get; set; }
|
||||
|
||||
public void OnGet()
|
||||
{
|
||||
MyModel = new SampleModel();
|
||||
}
|
||||
|
||||
public class SampleModel
|
||||
{
|
||||
public bool DefaultCheckbox { get; set; }
|
||||
|
||||
public bool DisabledCheckbox { get; set; }
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
</abp-tab>
|
||||
<abp-tab title="Tag Helper" active="true">
|
||||
<pre><code>
|
||||
<abp-input asp-for="@@Model.MyModel.DefaultCheckbox"/>
|
||||
<abp-input asp-for="@@Model.MyModel.DisabledCheckbox" disabled="true"/>
|
||||
</code></pre>
|
||||
</abp-tab>
|
||||
<abp-tab title="Rendered">
|
||||
<pre><code>
|
||||
<div class="form-check">
|
||||
<input type="checkbox" data-val="true" data-val-required="The DefaultCheckbox field is required." id="MyModel_DefaultCheckbox" name="MyModel.DefaultCheckbox" value="true" class="form-check-input "><input name="MyModel.DefaultCheckbox" type="hidden" value="false">
|
||||
<label class="form-check-label" for="MyModel_DefaultCheckbox">DefaultCheckbox</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input type="checkbox" data-val="true" data-val-required="The DisabledCheckbox field is required." id="MyModel_DisabledCheckbox" name="MyModel.DisabledCheckbox" value="true" disabled="" class="form-check-input "><input name="MyModel.DisabledCheckbox" type="hidden" value="false">
|
||||
<label class="form-check-label" for="MyModel_DisabledCheckbox">DisabledCheckbox</label>
|
||||
</div>
|
||||
</code></pre>
|
||||
</abp-tab>
|
||||
</abp-tabs>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-with-code">
|
||||
<div class="demo-area">
|
||||
<abp-radio asp-for="@Model.MyModel.CityRadio" asp-items="@Model.CityList" inline="true"/>
|
||||
</div>
|
||||
<div class="code-area">
|
||||
<abp-tabs>
|
||||
<abp-tab title="Modal Class">
|
||||
<pre><code>
|
||||
public class FormElementsModel : PageModel
|
||||
{
|
||||
public SampleModel MyModel { get; set; }
|
||||
|
||||
public void OnGet()
|
||||
{
|
||||
MyModel = new SampleModel();
|
||||
MyModel.CityRadio = "IST";
|
||||
}
|
||||
|
||||
public class SampleModel
|
||||
{
|
||||
[Display(Name="City")]
|
||||
public string CityRadio { get; set; }
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
</abp-tab>
|
||||
<abp-tab title="Tag Helper" active="true">
|
||||
<pre><code>
|
||||
<abp-radio asp-for="@@Model.MyModel.CityRadio" asp-items="@@Model.CityList" inline="true"/>
|
||||
</code></pre>
|
||||
</abp-tab>
|
||||
<abp-tab title="Rendered">
|
||||
<pre><code>
|
||||
<div>
|
||||
<div class="custom-control custom-radio custom-control-inline">
|
||||
<input type="radio" id="MyModel.CityRadioRadioNY" name="MyModel.CityRadio" value="NY" class="custom-control-input">
|
||||
<label class="custom-control-label" for="MyModel.CityRadioRadioNY">New York</label>
|
||||
</div>
|
||||
<div class="custom-control custom-radio custom-control-inline">
|
||||
<input type="radio" id="MyModel.CityRadioRadioLDN" name="MyModel.CityRadio" value="LDN" class="custom-control-input">
|
||||
<label class="custom-control-label" for="MyModel.CityRadioRadioLDN">London</label>
|
||||
</div>
|
||||
<div class="custom-control custom-radio custom-control-inline">
|
||||
<input type="radio" id="MyModel.CityRadioRadioIST" name="MyModel.CityRadio" value="IST" checked="checked" class="custom-control-input">
|
||||
<label class="custom-control-label" for="MyModel.CityRadioRadioIST">Istanbul</label>
|
||||
</div>
|
||||
<div class="custom-control custom-radio custom-control-inline">
|
||||
<input type="radio" id="MyModel.CityRadioRadioMOS" name="MyModel.CityRadio" value="MOS" class="custom-control-input">
|
||||
<label class="custom-control-label" for="MyModel.CityRadioRadioMOS">Moscow</label>
|
||||
</div>
|
||||
</div>
|
||||
</code></pre>
|
||||
</abp-tab>
|
||||
</abp-tabs>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>Enum</h4>
|
||||
|
||||
<div class="demo-with-code">
|
||||
<div class="demo-area">
|
||||
<abp-select asp-for="@Model.MyModel.CarType"/>
|
||||
</div>
|
||||
<div class="code-area">
|
||||
<abp-tabs>
|
||||
<abp-tab title="Modal Class">
|
||||
<pre><code>
|
||||
public class FormElementsModel : PageModel
|
||||
{
|
||||
public SampleModel MyModel { get; set; }
|
||||
|
||||
public void OnGet()
|
||||
{
|
||||
MyModel = new SampleModel();
|
||||
}
|
||||
|
||||
public class SampleModel
|
||||
{
|
||||
public CarType CarType { get; set; }
|
||||
}
|
||||
|
||||
public enum CarType
|
||||
{
|
||||
Sedan,
|
||||
Hatchback,
|
||||
StationWagon,
|
||||
Coupe
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
</abp-tab>
|
||||
<abp-tab title="Tag Helper" active="true">
|
||||
<pre><code>
|
||||
<abp-select asp-for="@Model.MyModel.CarType"/>
|
||||
</code></pre>
|
||||
</abp-tab>
|
||||
<abp-tab title="Rendered">
|
||||
<pre><code>
|
||||
<div class="form-group">
|
||||
<label for="MyModel_CarType">CarType</label>
|
||||
<select data-val="true" data-val-required="The CarType field is required." id="MyModel_CarType" name="MyModel.CarType" class="form-control">
|
||||
<option selected="selected" value="0">Sedan</option>
|
||||
<option value="1">Hatchback</option>
|
||||
<option value="2">StationWagon</option>
|
||||
<option value="3">Coupe</option>
|
||||
</select>
|
||||
</div>
|
||||
</code></pre>
|
||||
</abp-tab>
|
||||
</abp-tabs>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in new issue