0

有没有 Blazor 时间选择器和颜色选择器？我正在寻找 blazor 中的颜色选择器和时间选择器，它支持大多数具有统一行为的浏览器。我只发现跨浏览器不统一的 HTML 控件。

4

6 回答 6

1 
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}");
}
于 2021-03-21T11:31:03.697 回答
0

我创建了一个在 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 组件执行相同的操作。

于 2020-10-16T18:25:15.187 回答
0

这是一个项目，展示了如何创建一个简单的时间选择器：

https://github.com/pekspro/BlazorTimePicker

然后，您可以像这样使用时间选择器：

<Pekspro.Blazor.TimePicker.TimePickerComponent @bind-SecondOfDay="SecondOfDay" />

在同一个项目中，还有一个组件日期将时间选择器与日期选择器组合在一起，您可以轻松地将其绑定到 DateTime：

<Pekspro.Blazor.TimePicker.DateTimePickerComponent @bind-DateAndTime="SelectedDateTime" />
于 2021-05-29T06:39:23.113 回答
0

使用值绑定是由绑定处理的值更改。

组件标记：

<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"/>
于 2021-01-22T13:17:32.350 回答
-1

我会小心自定义控件。某些设备（尤其是手机）中的浏览器应该能够处理所需的 html 控件。例如，iPhone 用户可能习惯于使用特定控件输入颜色，并且可能不喜欢您覆盖默认值。

于 2021-03-21T13:58:07.723 回答
-1

正如 Umair 所提到的，您可以在 blazor 应用程序中使用任何 javascript 库。据我所知，您在 blazor 包中没有提到任何默认控件。对于时间选择器，我会推荐一些 javascript 世界之外的东西，或者您可以使用一些MatBlazor库 - 对于时间选择器，您可以使用 datePicker 来选择额外的时间。有关MatBlazor的更多信息，请参阅此

于 2020-09-25T07:26:42.367 回答