FAST 和 BLAZOR - 如何使用 Blazor 更改 fluent-design-system-provider 的调色板

Question

我正在使用 fluent-design-system-provider 评估新的 Microsoft fast.design https://www.fast.design/ 并尝试为 Blazor 项目自定义强调色，但运气不好...

根据官方文档 (https://www.fast.design/docs/design-systems/fast-frame)，这是我目前所做的：

在我的 asp.net 核心 Blazor 服务器项目的 _Host.cshtml

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title </title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
    <link href="Test.Main.styles.css" rel="stylesheet" />
</head>

<body>
    <fluent-design-system-provider use-defaults>
        <component type="typeof(App)" render-mode="ServerPrerendered" />

        <div id="blazor-error-ui">
            <environment include="Staging,Production">
                An error has occurred. This application may no longer respond until reloaded.
            </environment>
            <environment include="Development">
                An unhandled exception has occurred. See browser dev tools for details.
            </environment>
            <a href="" class="reload">Reload</a>
            <a class="dismiss"></a>
        </div>
    </fluent-design-system-provider>

    <script src="_framework/blazor.server.js"></script>
    <script type="module" src="https://unpkg.com/@@microsoft/fast-components"></script>
    <script type="module" src="https://unpkg.com/@@fluentui/web-components"></script>
    <script type="module" src="~/script/site.js"></script>
</body>
</html>

在我的 site.js 之后，我正在尝试生成并替换文档 https://www.fast.design/docs/design-systems/fast-frame#generating-and-replacing-palettes

中提到的调色板

import { parseColorHexRGB } from "@microsoft/fast-colors";
import { createColorPalette } from "@microsoft/fast-components";

// Initialization
(function () {
    const palette = createColorPalette(parseColorHexRGB("#28EBD7"));
    const provider = document.querySelector("fluent-design-system-provider");

    // change the neutral color pallete
    provider.neutralPalette = palette;    
})();

我收到以下错误，未捕获的类型错误：无法解析模块说明符“@microsoft/fast-colors”。相对引用必须以“/”、“./”或“../”开头。

我该如何解决这个问题？

Answer 1

据我所知，import用于客户端应用程序（如Angular，Teactjs），而不是Asp.net Core Blazor。如果您要创建客户端应用程序，则可以检查 Fast Integrations.

要将 Fast 与 Asp.net Core Blazor 集成，请在安装 Fast 后使用以下命令：

npm install --save @microsoft/fast-components

您可以在以下位置找到单文件脚本构建：

node_modules/@microsoft/fast-components/dist/fast-components.min.js

将其复制到您的 wwwroot/script 文件夹并使用 script 标签引用它，如上所述。 Razor 页面中的代码如下：

<script type="module" src="script/fast-components.min.js"></script>

更多详细信息，请参阅Fast Integrations for Asp.net Core Blazor。

Answer 2

我没有将完整路径添加到 Fluent Components js 文件，引用正确的路径效果很好！

import { neutralLayerL1Behavior, parseColorString } from "https://unpkg.com/@fluentui/web-components";
import { createColorPalette } from "https://unpkg.com/@microsoft/fast-components";    


export function initDesignSystemProvider() {

    const designSystemProvider = document.querySelector("fluent-design-system-provider");       

    var accentBaseColor = "#204320";
    const accentPalette = createColorPalette(parseColorString(accentBaseColor));
    designSystemProvider.accentBaseColor = accentBaseColor;
    designSystemProvider.accentPalette = accentPalette;             
 
}

FAST 和 BLAZOR - 如何使用 Blazor 更改 fluent-design-system-provider 的调色板

FAST and BLAZOR - How to change the Color Palette of fluent-design-system-provider with Blazor

asp.net-core

blazor

fluent-ui