简介

作为微软新一代设计语言和前端开发框架,fluentui拥有以下突出的优势:

现代简约的设计风格,符合微软fluent设计体系。
跨平台能力强,支持 Web、Windows、iOS、Android等。
与微软生态系统深度融合,如Office365等产品。
涵盖丰富的React组件,可快速构建界面。
良好的无障碍性和可定制性。
完善的文档、示例和设计资源支持。
微软公司本身的全力支持和持续投入。

作为微软最新推出的统一前端解决方案,fluentui将逐步替代之前的框架,为开发者提供一致的、现代化的、高质量的跨平台用户体验。对于需要与微软生态紧密集成,或追求现代简约设计风格的企业级应用来说,fluentui无疑是一个值得关注和学习的前端框架。

fluentui 即将发布 v9 的 stable version, v9文档

get started

1，安装pkg

npm i @fluentui/react-components

2，用<FluentProvider />包裹根组件，然后传递一个theme prop属性

Fluent UI 组件采用的是CSS in JS的模式，这就需要一个renderer在需要时把css植入到Dom中，React context就是扮演这个角色

2.1 react18

import React from 'react';
import { createRoot } from 'react-dom/client';
import { FluentProvider, webLightTheme } from '@fluentui/react-components';

import App from './App';

const root = createRoot(document.getElementById('root'));

root.render(
  <FluentProvider theme={webLightTheme}>
    <App />
  </FluentProvider>,
);

2.2 react17

import React from 'react';
import ReactDOM from 'react-dom';
import { FluentProvider, webLightTheme } from '@fluentui/react-components';

import App from './App';

ReactDOM.render(
  <FluentProvider theme={webLightTheme}>
    <App />
  </FluentProvider>,
  document.getElementById('root'),
);

3, 使用Fluent UI 组件

import React from 'react';
import { Button } from '@fluentui/react-components';

export default () => <Button appearance="primary">Get started</Button>;

strict mode

tip

在strict mode, 即严格模式下，你会发现Fluent UI v9 在 React 18中会有各种bug，这些bug只在严格模式下出现，导致程序终止，所以需要把严格模式关掉

在nextjs中，你需要这样配置next.config.js来关闭strict mode

module.exports = {
  reactStrictMode: false,
};

vitejs实战演示

1, 创建一个标准的vitejs项目

2, 用<FluentProvider />包裹根组件main.tsx

import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import { FluentProvider, webLightTheme } from '@fluentui/react-components';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <FluentProvider theme={webLightTheme}>
    <App />
  </FluentProvider>,
)

3, App.tsx

import { Button } from '@fluentui/react-components';

function App() {
  return (
    <>
      <Button appearance="primary">Get started</Button>
    </>
  )
}

export default App

浏览器预览效果：

简介​

get started​

strict mode​

vitejs实战演示​

简介

get started

strict mode

vitejs实战演示