@fluentui/ react-docsite-组件

用于建立内部文件网站和内部环路的组件和公用事业 流利的 UI 反应 (单位:千美元)之前的办公室 UI 纤维反应) 包裹.

这个包裹处于维护状态,而我们则在进行替换. 它只应在新项目中使用,前提是您必须拥有一个已公布的文档站点,该站点看起来像正式的Fluent UI React docs. 如果你需要的只是组件开发的内环, 请使用 故事书 换句话说. 故事书是一个得到良好支持的,记录齐全的平台,用于组件开发和文献.

实时编辑器支持

在演示应用程序中为非软件包设置活代码编辑器 @fluentui/react 软件包本身 :

1. 后续设置步骤 @fluentui/monaco-editor 读取我 (提到的帮助者也从下列地点再出口: @fluentui/react-monaco-editor 为方便起见.

2. 设置一个 .d.ts 使用 API 提取器滚动您的软件包文件 .

3. 添加对 raw-loader 到包含您演示应用程序的软件包.

4. 定义所支持软件包的自定义列表。 为了示范目的,我们假设:

   • 您正在构建默认的一组支持软件包
   • 你降级的包裹是 my-package
   • my-package 再导出另一个名为 my-package-utilities (不需要您的软件包导出其它任何内容, 但包含此内容以显示设置)
   • 每个包裹 .d.ts 滚滚活在 <package-folder>/dist/<unscoped-package-name>.d.ts

import { IPackageGroup } from '@fluentui/react-monaco-editor';
import { defaultSupportedPackages } from '@fluentui/react-monaco-editor/lib/utilities/defaultSupportedPackages';

export const editorSupportedPackages: IPackageGroup[] = [
  ...defaultSupportedPackages,
  {
    // Package's exports will be made available under this global name at runtime
    globalName: 'MyPackage',
    // Loader for the package's contents
    loadGlobal: () => import('my-package'),
    // Alternatively, for non-delayed loading:
    //   loadGlobal: () => require('my-package'),
    // Or at the top of the file, `import * as MyPackage from 'my-package'`, then:
    //   loadGlobal: () => Promise.resolve(MyPackage)
    packages: [
      {
        packageName: 'my-package',
        loadTypes: () => {
          // Use import() so the types can potentially be split into a separate chunk and delay loaded.
          // If you don't care about that, you could use require() instead.
          // @ts-ignore: import is handled by webpack
          return import('!raw-loader!my-package/dist/my-package.d.ts');
        },
      },
      {
        // my-package re-exports my-package-utilities from its root, so it goes under the same global
        packageName: 'my-package-utilities',
        loadTypes: () => {
          // @ts-ignore: import is handled by webpack
          return import('!raw-loader!my-package-utilities/dist/my-package-utilities.d.ts');
        },
      },
    ],
  },
];

5. 适用于单一 ExampleCard数字 :

import { editorSupportedPackages } from '<file path>';
import { MyExample } from './MyExample.Example';
const MyExampleCode = require('!raw-loader!./MyExample.Example.tsx');

<ExampleCard title="My example" code={MyExampleCode} editorSupportedPackages={editorSupportedPackages}>
  <MyExample />
</ExampleCard>;

6. 适用于所有人 ExampleCard 应用程序中的实例 :

import { editorSupportedPackages } from '<file path>';
import { IExampleCardProps, IAppDefinition } from '@fluentui/react-docsite-components';

const exampleCardProps: IExampleCardProps = { editorSupportedPackages };

// same applies with ISiteDefinition
const appDefinition: IAppDefinition = {
  // ...
  theme: {
    components: {
      ExampleCard: {
        styles: exampleCardProps,
      },
    },
  },
};