时间戳

首页 > 解决方案 > 有没有 Blazor 时间选择器和颜色选择器？

blazor - 有没有 Blazor 时间选择器和颜色选择器？

问题描述

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

标签： blazorblazor-webassembly

解决方案

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

推荐阅读