57 lines
1.9 KiB
Plaintext
57 lines
1.9 KiB
Plaintext
<h2>Textbox</h2>
|
|
<p>
|
|
Initially blank:
|
|
<input id="textbox-initially-blank" @bind(textboxInitiallyBlankValue) />
|
|
<span id="textbox-initially-blank-value">@textboxInitiallyBlankValue</span>
|
|
</p>
|
|
<p>
|
|
Initially populated:
|
|
<input id="textbox-initially-populated" @bind(textboxInitiallyPopulatedValue) />
|
|
<span id="textbox-initially-populated-value">@textboxInitiallyPopulatedValue</span>
|
|
</p>
|
|
|
|
<h2>Checkbox</h2>
|
|
<p>
|
|
Initially unchecked:
|
|
<input id="checkbox-initially-unchecked" @bind(checkboxInitiallyUncheckedValue) type="checkbox" />
|
|
<span id="checkbox-initially-unchecked-value">@checkboxInitiallyUncheckedValue</span>
|
|
</p>
|
|
<p>
|
|
Initially checked:
|
|
<input id="checkbox-initially-checked" @bind(checkboxInitiallyCheckedValue) type="checkbox" />
|
|
<span id="checkbox-initially-checked-value">@checkboxInitiallyCheckedValue</span>
|
|
</p>
|
|
|
|
<h2>Select</h2>
|
|
<p>
|
|
<select id="select-box" @bind(selectValue)>
|
|
<option value=@SelectableValue.First>First choice</option>
|
|
<option value=@SelectableValue.Second>Second choice</option>
|
|
<option value=@SelectableValue.Third>Third choice</option>
|
|
@if (includeFourthOption)
|
|
{
|
|
<option value=@SelectableValue.Fourth>Fourth choice</option>
|
|
}
|
|
</select>
|
|
<span id="select-box-value">@selectValue</span>
|
|
<button id="select-box-add-option" @onclick(AddAndSelectNewSelectOption)>Add and select new item</button>
|
|
</p>
|
|
|
|
@functions {
|
|
string textboxInitiallyBlankValue = null;
|
|
string textboxInitiallyPopulatedValue = "Hello";
|
|
|
|
bool checkboxInitiallyUncheckedValue = false;
|
|
bool checkboxInitiallyCheckedValue = true;
|
|
|
|
bool includeFourthOption = false;
|
|
enum SelectableValue { First, Second, Third, Fourth }
|
|
SelectableValue selectValue = SelectableValue.Second;
|
|
|
|
void AddAndSelectNewSelectOption()
|
|
{
|
|
includeFourthOption = true;
|
|
selectValue = SelectableValue.Fourth;
|
|
}
|
|
}
|