Marvin's Blog【程式人生】

Ability will never catch up with the demand for it

22 Aug 2021

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的混杂在一起了。

更多查看例子:https://github.com/microsoft/fast/tree/master/examples/blazor

(本篇完)

Categories

Tags