Fast.Design文档阅读【一】

<www.fast.design>的文档阅读笔记。

Introduction

Using FAST Frame Components

Web Components是一个集合名字，用于表示一系列W3C定义的HTML封装的技术，比如：

定义新的HTML标签
嵌入到一个标准组件的生命周期
封装HTML的渲染，【参数化的】CSS，皮肤组件以及更多。

FAST不创建自有的组件模型，所以FAST本身不自带框架。

FAST默认提供两套组件集合：@fluentui/web-components以及@microsoft/fast-components。这俩有不同的设计系统（Design System），前者用于微软自家的一众产品，后者则是更多聚焦于为业界提供可定义化的组件。这个可定制化系统叫做FAST Frame。

@microsoft/fast-foundation提供基础部件，可用于构建自定义的设计系统。基础部件带有状态管理，辅助功能支持，键盘导航，以及扩展/组合模型。在此之上只要添加自定义的样式即可。除了基础组件之外，@microsoft/fast-foundation还提供：

动态样式切换
CSS辖属管理
基于算法的颜色管理
RTL版式
高对比度
……

@microsoft/fast-element可用于创建新的组件。它在基础的Web组件上提供了一层薄薄的封装，增加了一些配置选项。@microsoft/fast-element在树摇之前，大概时10kb的尺寸（gzip最小化之后）。树摇之后大概时4.5k。

Components QuickStart

首先选定是采用@microsoft/fast-components还是@microsoft/fast-components，然后从NPM安装。以后者为例：

npm install --save @microsoft/fast-components
# 或者是用yarn
yarn add @microsoft/fast-components

下一步是注册想要使用的组件：

import { 
    fastButton, 
    provideFASTDesignSystem 
} from "@microsoft/fast-components";

provideFASTDesignSystem()
    .register(
        fastButton()
    );

也可以直接注册所有组件：

import { 
    allComponents, 
    provideFASTDesignSystem 
} from "@microsoft/fast-components";

provideFASTDesignSystem().register(allComponents);

这么做的缺点是像Webpack或者Rollup这些打包器可能无法树摇甩出不需要的代码。下面是通过cdn导入的例子：

<!DOCTYPE html>
<html lang="en">
    <head>
        <script type="module" src="https://unpkg.com/@microsoft/fast-components"></script>
    </head>
    <!-- ... -->
</html>

上面导入的module代码会自动注册设计系统以及所有组件。上面导入的module是最新版本，对于特定的app，最好导入特定版本的module。

使用组件：

<!-- ... -->
<fast-button>Hello world</fast-button>
<!-- ... -->

The FAST Frame Design System

可以配置DesignSystem。

可以通过下面的css隐藏还没定义的订制元素：

:not(:defined) {
    visibility: hidden;
}

默认FAST的组件都已fast为前缀，可通过DesignSystem.withPrefix()修改：

import { fastButton, provideFASTDesignSystem } from "@microsoft/fast-components";

provideFASTDesignSystem()
    .withPrefix("faster")
    .register(fastButton())

组件默认采用shadow root型式，可以通过以下方式关闭：

provideFASTDesignSystem()
    .withShadowRootMode("closed")
    .register(/* ... */)

DesignSystem.withElementDisambiguation()#用于解决重名问题

可以在组件注册时配置组件。

组件可以修改自身的前缀
组件可以自定义模板
组件可以自定义或者增加样式
组件可以自定义ShadowOptions

Configuring Styles

FAST Frame在样式上很灵活，只须些许代码改动，就可以产生大范围的样式变更。其所基于的时Design Tokens以及adaptive color system。

下列是与颜色不相干的Design Token：

Typography（Level，Font Size Token Name，Line Height Token Name）
- Minus 2 (smallest)，typeRampMinus2FontSize， typeRampMinus2LineHeight
- Minus 1，typeRampMinus1FontSize，typeRampMinus1LineHeight
- Base (body)，typeRampBaseFontSize，typeRampBaseLineHeight
- Plus 1，typeRampPlus1FontSize，typeRampPlus1LineHeight
- Plus 2，typeRampPlus2FontSize，typeRampPlus2LineHeight
- Plus 3，typeRampPlus3FontSize，typeRampPlus3LineHeight
- Plus 4，typeRampPlus4FontSize，typeRampPlus4LineHeight
- Plus 5，typeRampPlus5FontSize，typeRampPlus5LineHeight
- Plus 6 (largest)，typeRampPlus6FontSize，typeRampPlus6LineHeight
Sizing
- baseHeightMultiplier，与designUnit相乘得出的值用于设置大多数空间的基本高。可与density协同使用
- baseHorizontalSpacingMultiplier（待实现）
- controlCornerRadius，设置弧边弯度
- density （开发中），用于调节baseHeightMultiplier与baseHorizontalSpacingMultiplier
- designUnit，长宽的基本单位
Misc.
- direction，RTL或者是LTR
- disabledOpacity，已禁用的控件的不透明度
- strokeWidth，用于设置有线条的控件中的线条的宽度
- focusStrokeWidth，用于设置被聚焦的有线条的控件中的线条的宽度

FAST Frame颜色系统：

确保文本复合 WCAG对比度要求
可以轻快地在亮色与暗色模式之间切换
可以通过调色板着色主题
可感知地跨越背景色的协同性UI

FAST Frame仰赖于算法化的颜色，又称作Recipe，是谓算法加上输入所产生的值。通过调整recipe的值（measurement）或者算法（instruction）可以设计出不同的系统方案。

下面所列的是一系列用于同名值的同名算法：accentFill依赖于accentFillRestDelta，accentFillHoverDelta，accentFillActiveDelta，以及accentFillFocusDelta。

https://color.fast.design/可以用于调整颜色

大多数颜色来自于调色盘，fast-components自带的调色盘包括accent以及neutral。

许多recipe接收一个reference swatch。

许多recipe是“有状态的”，比如它们支持rest, hover, active, 以及focus等状态。

Fill指的是某Recipe用于填充一个更大的区域，比如一个组件的背板（backplate）

Foreground意味着recipe给文字，图标或者其他轻量级的装饰用。

Stroke指的是recipe用于线条，比如环绕线或者分隔线。

Accent突出算法
- accentFill，有状态，
- accentForeground，有状态，
- foregroundOnAccent，无状态，
Neutral中立算法
- neutralDivider，无状态
- neutralFill，有状态
- neutralFillContrast，有状态
- neutralFillInput，有状态
- neutralFillStealth，有状态
- neutralForeground，无状态
- neutralForegroundHint，无状态
- neutralStroke，有状态
Layer recipe们用于app的不同分区。可以收起，如果不需要。
- neutralFilLayter
- neutralLayer1, neutralLayer2, neutralLayer3, and neutralLayer4
- neutralLayerCardContainer
- neutralLayerFloating

FAST的自适应颜色系统完全是用JS处理的，用于生成的CSS定制辖属。对于用户，最好将这些CSS定制辖属看成是不可变更的。如果需要更改，请使用DesignToken.setValueFor()。

Integrations

Blazor

创建项目：

dotnet new blazorwasm -o fast-blazor

在index.html中加入：

<script type="module" src="https://unpkg.com/@microsoft/fast-components"></script>

如果需要使用npm方式的话，则：

npm install --save @microsoft/fast-components

然后将node_modules/@microsoft/fast-components/dist/fast-components.min.js移入wwwroot/script目录，并在index.html的script标记中引用之。

对于FluentUI Web组件，FAST有特殊的支持，详见文档。

样式似乎和bootstrap的混杂在一起了。

（本篇完）

Introduction#

Using FAST Frame Components#

Components QuickStart#

The FAST Frame Design System#

Configuring Styles#

Integrations#

Blazor#