Блог

Есть ли какие-либо средства выбора времени и цвета Блейзора? Я ищу средство выбора цвета и времени в blazor, которое поддерживает большинство браузеров с единообразным поведением. Я нахожу только HTML-элемент управления, который не является одинаковым для всех браузеров.

Я создал компонент для использования на сервере Blazor для выбора цвета. Он использует тип ввода HTML color.

 <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.

 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;
    }
}
  

Проект

Или radzen

 <RadzenColorPicker @bind-Value=@color ShowHSV=@showHSV ShowRGBA=@showRGBA 
ShowColors=@showColors ShowButton=@showButton Change=@OnChange />


void OnChange(string value)
{
    console.Log($"Value changed to: {value}");
}
  

Я настрою код @Mariano на встроенный blazor InputText , и таким образом вы будете выполнять двустороннюю привязку данных, и при нажатии кнопки отправки ваши EditForm изменения будут зафиксированы:
ColorSelector.razor

 <InputText type="color" id="head" name="head"
Value="@InColor"
ValueExpression="@(() => InColor)"
ValueChanged="@((string value) => UpdateIt(value))" />

@code {
    [Parameter]
    public string InColor { get; set; }
    [Parameter]
    public EventCallback<string> ReturnedColor { get; set; }

    private void UpdateIt(string value)
    {
        InColor = value;
        ReturnedColor.InvokeAsync(InColor);
    }

}
  

Тогда вы можете использовать его следующим образом:

 <ColorSelector InColor="@MyColor" ReturnedColor="ColorChange"></ColorSelector>
...
@code
{
    private void ColorChange(string e)
    {
        MyColor = e;
        StateHasChanged();
    }
}
  

Использование привязки значения — это изменение значения, обрабатываемое привязкой.

Разметка компонентов:

 <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, объединяющий средство выбора времени с средством выбора даты, которое вы легко можете привязать к дате и времени:

 <Pekspro.Blazor.TimePicker.DateTimePickerComponent @bind-DateAndTime="SelectedDateTime" />
  

Как упоминал Umair, вы можете использовать любую библиотеку javascript в приложении blazor. Насколько я знаю, в пакете blazor нет никаких элементов управления по умолчанию, которые вы упомянули. Для выбора времени я бы порекомендовал что-нибудь из мира javascript, или вы можете использовать что-нибудь из библиотеки MatBlazor — для выбора времени вы могли бы использовать DatePicker с дополнительным временем для выбора. Для получения дополнительной информации о MatBlazor см. Это