有没有 Blazor 时间选择器和颜色选择器？ 我正在寻找支持大多数具有统一行为的浏览器的 blazor 中的颜色选择器和时间选择器。我发现只有 HTML 控件在浏览器中不统一。
【问题讨论】：
IJSRuntime
<input type="color"... 这样的东西，但它看起来不太好。
Install-Package BlazorColorPicker
将脚本部分添加到 index.html 或 _Host.cshtml（head 部分）
<link href="_content/BlazorColorPicker/colorpicker.css" rel="stylesheet" />
<script src="_content/BlazorColorPicker/colorpicker.js"></script>
用法
@page "/"
@using BlazorColorPicker
<button class="btn btn-primary" @onclick="OpenModal">
<div style="background-color:@color" class="buttonColor"></div> Select a Color
</button>
<ColorPicker Title="My Blazor ColorPicker" IsOpened="isOpened" Closed="ClosedEvent" MyColor="@color">
</ColorPicker>
@code {
bool isOpened = false;
string color = "#F1F7E9";
void OpenModal()
{
isOpened = true;
}
void ClosedEvent(string value)
{
color = value;
isOpened = false;
}
}
<RadzenColorPicker @bind-Value=@color ShowHSV=@showHSV ShowRGBA=@showRGBA
ShowColors=@showColors ShowButton=@showButton Change=@OnChange />
void OnChange(string value)
{
console.Log($"Value changed to: {value}");
}
【讨论】：
我创建了一个在 Blazor 服务器中用于选择颜色的组件。它使用 HTML 输入类型颜色。
<input type="color" id="head" name="head" value="@InColor" @onchange="@UpdateIt">
<label for="head">@InColor</label>
@code {
[Parameter]
public string InColor { get; set; }
[Parameter]
public EventCallback<string> ReturnedColor { get; set; }
private void UpdateIt(ChangeEventArgs e)
{
InColor = e.Value.ToString();
ReturnedColor.InvokeAsync(InColor);
}
}
要使用您所要做的就是创建一个新的 blazor 组件并粘贴整个代码。例如，我创建了一个ColorSelector.razor 文件并在我的项目中使用：
<ColorSelector InColor="@MyColor" ReturnedColor="ColorChange"></ColorSelector>
...
@code
{
private void ColorChange(string e)
{
MyColor = e;
StateHasChanged();
}
}
您可以对 DatePicker 或其他已定义的 HTML 组件执行相同的操作。
【讨论】：
使用值绑定是由绑定处理的值更改。
组件标记：
<input type="color" @bind-value="@ColorHexCode"/>
组件代码：
public partial class ColorPicker : ComponentBase
{
private string m_ColorHexCode;
[Parameter]
public string ColorHexCode
{
get => m_ColorHexCode;
set
{
if (m_ColorHexCode == value) return;
m_ColorHexCode = value;
ColorHexCodeChanged.InvokeAsync(m_ColorHexCode);
}
}
[Parameter]
public EventCallback<string> ColorHexCodeChanged { get; set; }
}
组件使用：
<ColorPicker @bind-ColorHexCode="@ColorCode"/>
【讨论】：
这是一个展示如何创建简单时间选择器的项目：
https://github.com/pekspro/BlazorTimePicker
然后您可以像这样使用时间选择器：
<Pekspro.Blazor.TimePicker.TimePickerComponent @bind-SecondOfDay="SecondOfDay" />
在同一个项目中，还有一个组件 date 将时间选择器与日期选择器结合在一起，您可以轻松地将其绑定到 DateTime：
<Pekspro.Blazor.TimePicker.DateTimePickerComponent @bind-DateAndTime="SelectedDateTime" />
【讨论】：
正如 Umair 所述，您可以在 blazor 应用程序中使用任何 javascript 库。据我所知，您在 blazor 包中没有提到任何默认控件。对于时间选择器，我会推荐一些 javascript 世界之外的东西，或者您可以使用一些 MatBlazor 库 - 对于时间选择器，您可以使用带有额外时间选择的 datePicker。有关 MatBlazor 的更多信息，请参阅this
【讨论】：
我会小心使用自定义控件。某些设备（尤其是手机）中的浏览器应该能够处理所需的 html 控件。例如，iPhone 用户可能习惯于使用特定控件输入颜色，并且可能不喜欢您覆盖默认值。
【讨论】：