Fast Design是一套Web组件设计系统。
介绍
不同的产品需要不同的视觉风格,如果每个产品都整一套组件,那么轮子就造得太多了。
有没有一种设计,能够随着产品的需求,自定义其风格。Fast Design给出了一个答案。
Fast Design基于Web原生的组件技术,在其上提供了可自定义风格的框架。
https://explore.fast.design可以浏览Fast Design所提供的组件。
https://www.fast.design/docs/introduction/
- Introduction
- Where should I start?,你可以
- 使用已提供的组件
- 构建自己的设计体系
- 构建自己的组件
- 将FAST与其他框架整合
- What is FAST?
- Web组件其实是指一系列web标准,联合起来可以用于创建自定义的HTML元素
- 定义新的HTML标签、生命周期管理、HTML和CSS封装、参数化CSS,皮肤组件等等
- FAST提供了
@microsoft/fast-components
,里面包含了已实现的现有组件(聚焦于Web工业化的风格,叫做FAST Frame)@microsoft/fast-foundation
,里面包含了对设计体系进行自定义的工具@microsoft/fast-element
,里面包含了轻量级的工具,用于创建自定义的web组件(即自定义的HTML元素)
- Web组件其实是指一系列web标准,联合起来可以用于创建自定义的HTML元素
- Where should I start?,你可以
- Using the Components
- The FAST Frame Design System
- FAST Frame (
@microsoft/fast-components
) 是一套可以高度自定义的、由组件构成的、设计体系。 -
Using FAST Frame Components
-
Create a DesignSystem
-
Add Element to HTML
-
Hide undefined elements
-
-
Configuring Components
-
Configuring the DesignSystem
- 本章API会覆盖组件配置,组件注册时特别指明的除外
DesignSystem.withPrefix()
- 前缀,可以用
-
隔离
- 前缀,可以用
DesignSystem.withShadowRootMode()
- 指定ShadowRootMode是Open还是Closed
DesignSystem.withElementDisambiguation()
- 注册重名元素的一些问题
-
Configuring Components During Registration
- Prefix
- Template
- Styles
- Shadow Options
-
-
Configuring Styles
- 设计号牌,以及适应性的颜色系统
-
FAST Frame Design Tokens
- Typography、Sizing、Misc
-
Adaptive Color System
- (过)
- FAST Frame (
- The FAST Frame Design System
- Building Components
- Getting Started
- Installation(略)
- From CDN(略)
- Defining Elements
- Basic elements
- 只须从FASTElement派生,然后注记
customElement('name-tag')
- 然后就可以使用,方式如
<name-tag></name-tag>
- 添加属性的话,形如
@attr greeting: string = 'Hello';
- 从FASTElement派生的默认会有一个ShadowRoot
- 只须从FASTElement派生,然后注记
- Customizing attributes
- 使用浏览器的
setAttribute
来将属性反映到DOM上 - 可以用
mode
辖属控制此过程- reflect ,默认,可以指定converter
- boolean ,使用内在的booleanConverter
- fromView ,不反映,但接收
- 例子
@attr({ mode: 'boolean' }) disabled: boolean = false;
export class MyCounter extends FASTElement { @attr({ converter: numberConverter }) count: number = 0;
- 使用浏览器的
- The element lifecycle
- 所有的Web组件支持特定命循事件
- constructor、connectedCallback、disconnectedCallback、attributeChangedCallback(attrName, oldVal, newVal)、adoptedCallback
- 所有的Web组件支持特定命循事件
- Working without decorators
- 修饰器是JS未完成的特性,但其语法应该不会有太大变动了
- 建议在TS上使用
"importHelpers": true
编译选项,这样就从tslib导入共享的帮助例程 - 如果需要建构最小的尺寸,可以不使用修饰器,用静态的definition域属代替。
- Basic elements
- Declaring Templates
-
Basic templates
- 通过模板来应对大部分渲绘场景
- 在
@customElement
上使用html
签定的模板,返回的是一个ViewTemplate - 模板内,提供绑定来声明(箭头算函)模板的动态部分
- 算函的输入是数据模型
-
Typed Templates
- 可以显示指定template的类型,比如将ViewTemplate按照类型导入,就有
const template: ViewTemplate<NameTag> = html`` …… ``
- 可以显示指定template的类型,比如将ViewTemplate按照类型导入,就有
- 在
- 通过模板来应对大部分渲绘场景
-
Understanding bindings
-
Content (过)
-
Attributes
- 对于class属性,默认行为是不造成干扰,要去除掉这个,使用辖属绑定,比如
:className="list-item ${x => x.type}"
- 对于class属性,默认行为是不造成干扰,要去除掉这个,使用辖属绑定,比如
-
Properties
- 形如:
:myCustomProperty="${x => x.mySpecialData}"
- 形如:
:innerHTML="${x => x.someDangerousHTMLContent}"
- 直接设置innerHTML存在风险,参考文中内容
- 形如:
-
Events
- 形如:
@click="${x => x.remove()}"
- 形如:
@input="${(x, c) => x.handleDescriptionChange(c.event)}"
- 默认会调用
preventDefault()
,可以在事件处理中返回true来阻止此行为 - 只支持从model到view的单向数据流,不支持双向绑定,从view到model要通过事件处理
- 形如:
-
-
Templating and the element lifecycle
- 在connectedCallback阶段FASTElement 才创建模板和绑定视图,只在首次连接时发生一次
- 默认情况下,模板来自template辖属,但是可以通过自定义resolveTemplate()来提供模板,会在connectedCallback期间调用
- FASTElement的
$fastController
辖属允许动态变化模板
-
- Using Directives
- 除了模板的动态部分,还可以访问到多个强力的指令
-
Structural directives
- 可以增删DOM节点
-
The when directive
- 特定条件下渲绘
- @observable修饰器添加可观测的辖属,类似@attr,但不会反映在HTML属性上
- 除了直接提供html模板外,when还支持通过表达式来运算成模板
-
The repeat directive
- 渲绘列表数据
-
Composing templates
- html标签助手返回的ViewTemplate 在模板中有特殊的处理
-
Referential directives
- 获取到DOM节点的引用
-
The ref directive
- 获取到元素的引用
-
The children directive
- 获取到元素下级元素的引用
-
The slotted directive
- 获取插入到某个槽位的所有节点
-
Host directives
- html中以template为根元素,template上的属性可以应用于侯宿
- Observables and State
-
Reactivity
- 在模板中使用箭头算函绑定以及指示,允许
fast-element
智能相应,仅更新所需部分,无需virtual DOM, VDOM diffing, 或DOM reconciliation算法。 - 引擎负责协调改动DOM的任务
- 在模板中使用箭头算函绑定以及指示,允许
-
Observables
- 开启绑定跟踪和改动通知,辖属需要修饰
@attr
或@observable
,前者用于需要反映成元素属性的初始类型,比如(string, bool, number),后者则用于剩余场景 - 模板系统也可以观察阵列,需要用到repeat指示
- 这些修饰器是在标类上进行辖属元编程的一个手段
@attr
之恶能用于FASTElement@observable
可用于任意标类- 只有一个getter的辖属不应用
@attr
或者@observable
修饰,也许适用于@volatile
- 开启绑定跟踪和改动通知,辖属需要修饰
-
Observable Features
-
Access tracking
- 可以手动调用
Observable.track
或Observable.notify
方法 - 如果你的代码有分支逻辑,则需要通过
@volatile
告知
- 可以手动调用
-
Internal observation
- 可以实现
propertyNameChanged
来对自身状态通知进行反应
- 可以实现
-
External observation
- 通过
Observable.getNotifier
,然后通过notifier.subscribe
注册
- 通过
-
-
Observing Arrays
- 也需要通过
Observable.getNotifier
- 也需要通过
-
Observing Volatile Properties
- (略)
-
Records
- 通过
BindingObserver.records()
可知有哪些记录的观察
- 通过
-
- Working with Shadow DOM
- 除了定义元素、定义元素上的属性之外,如果用声明式模板控制元素的渲绘也要做以说明
-
The default slot
- 元素组合,我们所需做的就是使用标准的
<slot>
元素 - The text “John Doe” exists in the “Light DOM”, but it gets projected into the location of the slot within the “Shadow DOM”.
- 元素组合,我们所需做的就是使用标准的
-
Named slots
- 顾名思义,但值得注意
- 同一个槽位可以插入多个节点,会保留节点原次序
- 只能在直接下级使用
slot
属性 - 对应槽位不存在的话,不会被渲绘
- 如果slot元素是另一个自定义元素的直接下级,也可以有自己的slot属性
- 不必为每个声明了的槽位提供内容
- 顾名思义,但值得注意
-
Fallback content
- 槽位元素内可以提供候选内容
-
Slot APIs
- slotchange
- assignedNodes
- assignedSlot
-
Events
- Shadow DOM会把内部产生的事件以顶层元素的名义发出去
composed: true
必须设置- 文中举了两派例子
- 通过
composedPath()
可以获得完整合成的事件路径
-
Custom events
- 使用
$emit
助手
- 使用
- Shadow DOM会把内部产生的事件以顶层元素的名义发出去
-
Shadow DOM configuration
- FASTElement自动创建
open
模式的Shadow Root,可以通过指定shadowOptions: { mode: 'closed' }
配置closed
模式 shadowOptions: null
直接渲绘到Light DOM- shadowOptions上可以设置所有attachShadow 用编口上允许的选项
- FASTElement自动创建
-
Shadow DOM and the element lifecycle
- open模式下,shadowRoot可作为自定义元素的辖属获得
- Leveraging CSS
-
Basic styles
- FASTElement提供了一个css签定的模板助手,然后配置到styles
- 内部,FASTElement使用https://wicg.github.io/construct-stylesheets/还有ShadowRoot#adoptedStyleSheets来在组件间重用CSS
- 全面使用CSS Custom Properties以及CSS Calc
-
Composing styles
- css模板助手可以嵌套其他css内容
-
Partial CSS
- 使用cssPartial
-
CSSDirective
- 允许通过ElementStyles来绑定行为
-
createCSS
- createCSS方法返回一个可供插值的字符串
-
createBehavior
-
Usage in ElementStyles
-
Shadow DOM styling
:host
允许应用样式到自定义元素- 有一些建议开启的设置
- display ,自定义元素的默认display为inline
- contain ,如果在边界内渲绘的话,建议将contain 设为content
- hidden ,添加对hidden的支持
-
Slotted content
- 形如
::slotted(img)
- 侯宿和槽定样式都可以被元素使用者覆写
- 形如
-
Styles and the element lifecycle
- 在connectedCallback 阶段添加元素的样式,而且只添加一次
- 通常样式由配置中的styles辖属提供,但是可以通过
resolveStyles()
自定义 $fastController
上的styles辖属可以修改样式-
Hiding undefined elements
- 没有upgraded过的自定义元素不具备样式,为了避免FOUC,最后将其隐藏之。
-
- Next Steps
- 可以用FAST Components,而不是自己构建
- 其他一些资源。
- Getting Started
- Creating Design Systems
- Overview
- 一个设计系统可以想象成一套交互性的媒体资源,用以提升品牌一致性
-
How does FAST facilitate development of design systems?
- (过)
-
A highly configurable design system
- FAST Frame
- 由一套web组件,以及伴随的设计号牌
-
Design Tokens
- 用于表达设计上的抽象,比如颜色、布局、间隔单位等等
- FAST Frame
-
Your own design system based on FAST components
- 可以自定义
@microsoft/fast-foundation
所提供元素的模板和样式
- 可以自定义
- Creating a Component Library
- 也可以用于创建料库或组件系统,比如:
- 可以配置custom element的名字
- custom element需要显示注册,因此不会无端增加体积
- 模板、样式、默认槽位内容等等皆可配置
- 方便配置Shadow DOM
-
Defining components
- 从
@microsoft/fast-foundation
导入FoundationElement,而不是FastElement- 不使用@customElement,因为会立马初始化模板和样式
- 从
-
Define Templates and Styles
- 支持ElementDefinitionContext和FoundationElementDefinition
-
What is the ElementDefinitionContext?
- 暴露注册时才有的信息
-
What is the FoundationElementDefinition?
- 给元素自身使用的配置
-
Compose and Export Registration
- 形如
Counter.compose<CounterDefinition>
- 形如
-
Defining a design system
-
FAST design system thinking
- 使用场景思考
- foundation components,设计系统无关,高度可重用
- design system
- application,按需注册组件
- features,只使用application涉及的组件
- 使用场景思考
-
Composing a foundation component
- (过)
-
Creating a design system provider function
- (过)
-
- 也可以用于创建料库或组件系统,比如:
- Design Tokens
- (过)
- High Contrast
- (过)
- MatchMedia Stylesheets
- (过)
- Localization
-
Document Direction
-
- Overview
- Tools
- Resources
- Why Web Components?
-
You might choose Web Components for performance.
-
You might use Web Components for their interoperability.
-
You might leverage Web Components because they can be incrementally adopted.
-
You might choose Web Components to be future-compatible with the open web.
-
You might choose Web Components if you are creating an extensible ecosystem or application with a plugin model.
-
You might choose Web Components if you want to include community members who are not proficient with JavaScript.
-
Who is using Web Components?
-
- Acknowledgements
- asap,异步任务管理
- Aurelia,修饰器及元数据模型
- faastjs,api-exractor
- Knockout,观察者系统
- lit-html,签定的JS模板字面值
- Polymer,早期拥抱Web component的料库
- Vue ,
:
和@
来自它
- Cheat Sheet
- FAQ
-
Who is behind FAST?
-
What does FAST stand for?
- “Functional, Adaptive, Secure, and Timeless Design Network Architecture”
-
How does fast-element compare to “Framework X”?
-
What are Web Components?
- the ability to define new HTML tags, plug into a standard component lifecycle, encapsulate HTML rendering and CSS, parameterize CSS, skin components, and more.
-
Why should I choose Web Components over [other JavaScript framework]?
-
Are Web Components “done”?
-
Why does FAST have components that are already available in HTML?
- CSS Encapsulation
- CSS Behaviors
- Enhanced Anatomies
-
- Why Web Components?
Fluent UI Web Components Overview
Fluent UI是跨原生平台和Web平台的设计体系,其中Web平台的组件是基于Fluent的,参考 https://developer.microsoft.com/en-us/fluentui#/controls/webcomponents。示例在https://fluent-components.azurewebsites.net/?path=/docs/getting-started-overview--page
- Other Info
- FAQ
- What’s the difference between Fluent and FAST?
@fluentui/web-components
也是FAST组发布的,但是代码在https://github.com/microsoft/fluentui/,实现的是Fluent风格。fast-components实现的是FAST Frame风格。
- How does fast-element compare to “Framework X”?
fast-element
不想成为"mega SPA framework",而只是专注于Web组件创建
- Why does FAST have components that are already available in HTML?
- 达成CSS封装,使用Shadow DOM来将样式嵌入组件
- 调整CSS行为,自定义元素可以让FAST动态增删样式
- 从https://open-ui.org/学习的经验,更细力度的分解,可以带来更自由的组合。
- What’s the difference between Fluent and FAST?
- FAQ
Fast Blazor
- Introduction
- Fast Blazor是Fast Deisgn与Blazor的结合。也就是把Fluent UIs封装给Blazor使用。
- Getting Started
- 安装NuGet料包
dotnet add package Microsoft.Fast.Components.FluentUI
- 添加fluentui的css
<script type="module" src="https://cdn.jsdelivr.net/npm/@fluentui/web-components/dist/web-components.min.js"></script>
- 在Program.cs中添加
builder.Services.AddFluentUIComponents();
- 对于Blazor Server,需要添加
builder.Services.AddHttpClient();
,否则会出现错误https://stackoverflow.com/questions/73584115/cannot-provide-a-value-for-property-iconservice-on-type-microsoft-fast-compon
- 安装NuGet料包
Fast Blazor目前还是存在一些问题的
- Anchored Region貌似不能用
- ListBox的Size参数不生效
文档:
- https://learn.microsoft.com/en-us/fluent-ui/web-components/components/tabs?pivots=blazor
- https://github.com/microsoft/fast/tree/master/packages/web-components/fast-foundation/src
- 官方组件展示廊:https://brave-cliff-0c0c93310.azurestaticapps.net/
- 组件展示廊其二:https://fluentui-blazor.baaijte.net/
其他
- 参考fast仓库中的examples\design-system-tutorial
- https://backlight.dev/blog/introducing-furious-a-fast-design-system
- https://web.dev/custom-elements-best-practices/
(本篇完)