Progress
This commit is contained in:
parent
323c66fecd
commit
9832ec01d8
@ -1,16 +1,12 @@
|
||||
@page "/"
|
||||
@using Connected.Models;
|
||||
|
||||
<h1 style="text-align:center;">Component Sandbox</h1>
|
||||
|
||||
<p>ValueDouble: @inputValueDouble.ToString()</p>
|
||||
<p>ValueInt: @inputValueInt.ToString()</p>
|
||||
<p>ValueText: @inputValueText</p>
|
||||
|
||||
<Alert
|
||||
Severity="Severity.Error"
|
||||
ShowCloseButton="true">
|
||||
Alert!!
|
||||
</Alert>
|
||||
<p>SimpleSelectValue: @SelectedItemValue</p>
|
||||
|
||||
<InputNumber
|
||||
Clearable="false"
|
||||
@ -55,10 +51,21 @@
|
||||
@bind-Value="@inputValueText">
|
||||
</InputText>
|
||||
|
||||
<SimpleSelect
|
||||
Label="Simple Select"
|
||||
|
||||
ValueType="string"
|
||||
@bind-Value="@SelectedItemValue"
|
||||
Items="@SelectFieldItems">
|
||||
</SimpleSelect>
|
||||
|
||||
|
||||
@code {
|
||||
|
||||
|
||||
List<SelectItem<string>> SelectFieldItems = new();
|
||||
string SelectedItemValue = "";
|
||||
|
||||
int counter { get; set; } = 0;
|
||||
|
||||
private string _inputText = string.Empty;
|
||||
@ -89,4 +96,19 @@
|
||||
|
||||
string errorText = "Error!!";
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
SelectFieldItems.Add(new SelectItem<string>() { DisplayedText = "Item 1", Value = "select item value 1", Enabled = true });
|
||||
SelectFieldItems.Add(new SelectItem<string>() { DisplayedText = "Item 2", Value = "select item value 2", Enabled = true });
|
||||
SelectFieldItems.Add(new SelectItem<string>() { DisplayedText = "Item 3", Value = "select item value 3", Enabled = true });
|
||||
SelectFieldItems.Add(new SelectItem<string>() { DisplayedText = "Item 4", Value = "select item value 4", Enabled = true });
|
||||
SelectFieldItems.Add(new SelectItem<string>() { DisplayedText = "Item 5", Value = "select item value 5", Enabled = false });
|
||||
SelectFieldItems.Add(new SelectItem<string>() { DisplayedText = "Item 6", Value = "select item value 6", Enabled = true });
|
||||
SelectFieldItems.Add(new SelectItem<string>() { DisplayedText = "Item 7", Value = "select item value 7", Enabled = true });
|
||||
SelectFieldItems.Add(new SelectItem<string>() { DisplayedText = "Item 8", Value = "select item value 8", Enabled = false });
|
||||
SelectFieldItems.Add(new SelectItem<string>() { DisplayedText = "Item 9", Value = "select item value 9", Enabled = true });
|
||||
SelectFieldItems.Add(new SelectItem<string>() { DisplayedText = "Item 10", Value = "select item value 10", Enabled = true });
|
||||
SelectedItemValue = SelectFieldItems[0].Value;
|
||||
}
|
||||
|
||||
}
|
@ -42,87 +42,3 @@
|
||||
}
|
||||
</div>
|
||||
</button>
|
||||
|
||||
|
||||
<!--
|
||||
<section id="buttons" class="mt-3 b-1 b-r-4 p-5">
|
||||
<h2>Buttons</h2>
|
||||
<p>
|
||||
Use custom button styles for actions in forms, dialogs, and more with support for multiple sizes,
|
||||
states, and more.
|
||||
</p>
|
||||
<div>
|
||||
<h4 class="text-core mt-5">Examples</h4>
|
||||
<div class="d-flex flex-wrap gap-3 ">
|
||||
<button type="button" href="#" class="btn btn-core">click me</button>
|
||||
<button type="button" href="#" class="btn btn-primary">click me</button>
|
||||
<button type="button" href="#" class="btn btn-secondary">click me</button>
|
||||
<button type="button" href="#" class="btn btn-success">click me</button>
|
||||
<button type="button" href="#" class="btn btn-info">click me</button>
|
||||
<button type="button" href="#" class="btn btn-warning">click me</button>
|
||||
<button type="button" href="#" class="btn btn-danger">click me</button>
|
||||
<button type="button" href="#" class="btn btn-white">click me</button>
|
||||
<button type="button" href="#" class="btn btn-light">click me</button>
|
||||
<button type="button" href="#" class="btn btn-dark">click me</button>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="mt-4 mb-4">
|
||||
<div>
|
||||
<h4 class="text-core mt-5">Outline buttons</h4>
|
||||
<div class="d-flex flex-wrap gap-3 ">
|
||||
<button type="button" href="#" class="btn btn-outline-core">click me</button>
|
||||
<button type="button" href="#" class="btn btn-outline-primary">click me</button>
|
||||
<button type="button" href="#" class="btn btn-outline-secondary">click me</button>
|
||||
<button type="button" href="#" class="btn btn-outline-success">click me</button>
|
||||
<button type="button" href="#" class="btn btn-outline-info">click me</button>
|
||||
<button type="button" href="#" class="btn btn-outline-warning">click me</button>
|
||||
<button type="button" href="#" class="btn btn-outline-danger">click me</button>
|
||||
<button type="button" href="#" class="btn btn-outline-white">click me</button>
|
||||
<button type="button" href="#" class="btn btn-outline-light">click me</button>
|
||||
<button type="button" href="#" class="btn btn-outline-dark">click me</button>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="mt-4 mb-4">
|
||||
<div>
|
||||
<h4 class="text-core mt-5">Sizes</h4>
|
||||
<div class="">
|
||||
<button type="button" href="#" class="btn btn-sm btn-core">small button</button>
|
||||
<button type="button" href="#" class="btn btn-sm btn-light">small button</button>
|
||||
</div>
|
||||
<div class="mt-4 ">
|
||||
<button type="button" href="#" class="btn btn-lg btn-core">large button</button>
|
||||
<button type="button" href="#" class="btn btn-lg btn-light">large button</button>
|
||||
</div>
|
||||
<div class="mt-4 ">
|
||||
<button type="button" href="#" class="btn btn-block btn-core">full width button</button>
|
||||
<button type="button" href="#" class="mt-4 btn btn-block btn-light">
|
||||
full width
|
||||
button
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="mt-4 mb-4">
|
||||
<div>
|
||||
<h4 class="text-core mt-5">Button states</h4>
|
||||
<div class="">
|
||||
<button type="button" href="#" class="btn btn-core active" aria-pressed="true">
|
||||
active
|
||||
button
|
||||
</button>
|
||||
<button type="button" href="#" class="btn btn-core">normal button</button>
|
||||
<button type="button" href="#" class="btn btn-core disabled" aria-disabled="true">
|
||||
disabled
|
||||
button
|
||||
</button>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<button type="button" href="#" class="btn btn-outline-core active" aria-pressed="true">active button</button>
|
||||
<button type="button" href="#" class="btn btn-outline-core">normal button</button>
|
||||
<button type="button" href="#" class="btn btn-outline-core disabled" aria-disabled="true">
|
||||
disabled
|
||||
button
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
-->
|
||||
|
18
src/Connected.Components/Components/SimpleSelect.razor
Normal file
18
src/Connected.Components/Components/SimpleSelect.razor
Normal file
@ -0,0 +1,18 @@
|
||||
@using Connected.Models;
|
||||
|
||||
@typeparam ValueType
|
||||
|
||||
@inherits InputBase;
|
||||
|
||||
<div class="@InputFieldClassList">
|
||||
<select @bind="@Value" @oninput="@ChangeValueAsync">
|
||||
@if (EnableSearch)
|
||||
{
|
||||
<InputText @bind-Value="@SearchText" ValueChanged=""></InputText>
|
||||
}
|
||||
@foreach(SelectItem<ValueType> item in Items)
|
||||
{
|
||||
<option value="@item.Value">@item.DisplayedText</option>
|
||||
}
|
||||
</select>
|
||||
</div>
|
45
src/Connected.Components/Components/SimpleSelect.razor.cs
Normal file
45
src/Connected.Components/Components/SimpleSelect.razor.cs
Normal file
@ -0,0 +1,45 @@
|
||||
using Connected.Models;
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using System;
|
||||
|
||||
namespace Connected.Components;
|
||||
public partial class SimpleSelect<ValueType> : InputBase
|
||||
{
|
||||
[Parameter]
|
||||
public ValueType Value { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public IEnumerable<SelectItem<ValueType>> Items { get; set; }
|
||||
|
||||
public IEnumerable<SelectItem<ValueType>> OriginalItems { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public bool EnableSearch { get; set; } = true;
|
||||
public string SearchText { get; set; }
|
||||
|
||||
public void FilterItems()
|
||||
{
|
||||
Items= Items.Where(item => item.Value.ToString().ToLower().Contains(SearchText.ToLower()) || item.DisplayedText.ToString().ToLower().Contains(SearchText.ToLower()));
|
||||
}
|
||||
|
||||
|
||||
[Parameter]
|
||||
public EventCallback<ValueType> ValueChanged { get; set; }
|
||||
|
||||
private async Task ChangeValueAsync(ChangeEventArgs args)
|
||||
{
|
||||
await ValueChanged.InvokeAsync((ValueType)Convert.ChangeType(args.Value, typeof(ValueType)));
|
||||
}
|
||||
|
||||
protected override async Task OnParametersSetAsync()
|
||||
{
|
||||
if (base.InputAttributes is null) base.InputAttributes = new();
|
||||
if (base.Required)
|
||||
{
|
||||
if (base.InputAttributes.ContainsKey("required")) base.InputAttributes.Add("required", true);
|
||||
}
|
||||
OriginalItems = Items;
|
||||
await base.OnInitializedAsync();
|
||||
}
|
||||
|
||||
}
|
9
src/Connected.Components/Models/SelectItem.cs
Normal file
9
src/Connected.Components/Models/SelectItem.cs
Normal file
@ -0,0 +1,9 @@
|
||||
namespace Connected.Models
|
||||
{
|
||||
public class SelectItem<ValueType>
|
||||
{
|
||||
public string DisplayedText { get; set; }
|
||||
public ValueType Value { get; set; }
|
||||
public bool Enabled { get; set; }
|
||||
}
|
||||
}
|
@ -0,0 +1,4 @@
|
||||
@import 'globals/_index';
|
||||
@import 'layout/_index';
|
||||
@import 'components/_index';
|
||||
@import 'util/_index';
|
Loading…
x
Reference in New Issue
Block a user