标签: fluent-ui

我正在寻找一些指南@fluent-ui/react和@fluent-ui/react-northstar之间有什么区别。该文档（自述文件）非常不精确。我不明白用哪一个来做什么。我正在编写要在 webapp 和 word 插件中运行的 react-component。你知道该去哪一个吗？它们看起来都有些不同，并且感觉主题的工作方式有些不同。

我正在尝试创建一个带有可排序列的DetailsList（类似于此处文档中的示例： https: //uifabric.azurewebsites.net/#/controls/web/detailslist），但我想使用而不是类组件功能组件和钩子。

问题在于，当执行 onColumnClick 函数时，“items”数组仍然为空。

这基本上是我的组件的设置：

const MyList= () => {
  const [items, setItems] = useState([]);
  const [columns, setColumns] = useState([]);

  useEffect(() => {
    const newItems = someFetchFunction()
    setItems(newItems);

    const newColumns= [
      {
        key: "column1",
        name: "Name",
        fieldName: "name",
        onColumnClick: handleColumnClick,
      },
      {
        key: "column2",
        name: "Age",
        fieldName: "age",
        onColumnClick: handleColumnClick,
      },
    ];
    setColumns(newColumns);
  }, []);

  const handleColumnClick = (ev, column) => {
    console.log(items); // This returns [] instead of a populated array.
  };

  return <DetailsList items={items} columns={columns} …

我目前正在编写一个 React -typescript 应用程序来练习 FluentUI（又名 Fabric）。我的 App.tsx 组件出现\n问题。

import React, { useContext, useState } from 'react';\nimport logo from './logo.svg';\nimport './App.css';\nimport Search from './components/Search';\n//import CategoriasProvider from './components/Context/CategoriasContext';\nimport Title from './components/Title';\nimport { ListGhostingExample } from '../src/components/DrinkList';\nimport { PrimaryButton } from 'office-ui-fabric-react';\nimport { CategoriasContext,  ICategoriasContextInterface } from './components/Context/CategoriasContext';\nimport CategoriasProvider from './components/Context/CategoriasContext';\nimport axios from 'axios';\nimport './components/DrinkList.css'\nimport './components/Search.css'\n\ninterface IApp{\n  items:ICategoriasContextInterface[],\n  renderList:boolean\n  \n}\n\nconst App =()=> {\n \n  const contextValues=useContext(CategoriasContext);\n  \n  return(\n<CategoriasProvider>\n    <div className="App">\n     \n        <div className="search">\n          <Search name={contextValues?.name} image={contextValues?.image} thumbnail={contextValues?.thumbnail} />\n        </div>\n\n     \n    </div>\n    </CategoriasProvider>\n …

如何安装 Fluent UI React 和 remix run？我相信这个问题非常重要，需要在这里解决，因为它是社区采用 office-UI-fabric-react 的绊脚石。

我正在使用Fluent UI DetailsList。在示例中，组件被实现为类组件，但我使用的是函数组件。

我在获取所选项目时遇到困难，我认为并认为我的实施不正确。问题是我没有得到任何选定的项目。

export const JobDetails = () =>  {
    const { actions, dispatch, isLoaded, currentTabJobs, activeTabItemKey } = useJobDetailsState()

    let history = useHistory();

    useEffect(() => {
        if (actions && dispatch) {
            actions.getJobListDetails()
        }
    }, [actions, dispatch])

    const getSelectionDetails = (): string =>  {
        let selectionCount = selection.getSelectedCount();

        switch (selectionCount) {
            case 0:
                return 'No items selected';
            case 1:
                return '1 item selected: ' + (selection.getSelection()[0] as any).name;
            default:
                return `${selectionCount} items selected`;
        }
    }

    const [selectionDetails, …

今天我尝试使用Fluent-ui 的分组详细信息列表。

我的期望：我需要声明一些组，比如说红色、蓝色、绿色，然后添加到每个项目，我想添加到列表中，这是一个将项目映射到组的特定属性。例如：

groups: [
            { key: 'red', name: 'Color: "red"'},
            { key: 'green', name: 'Color: "green"'},
            { key: 'blue', name: 'Color: "blue"' },
          ],

items: [...,
        { key: 'red',anyProp1: "abc", anyProp2: "dfg",...},
       ...,
      ]

我发现我必须做的事情：我需要对包含我的项目的数组进行排序，属于红色组的所有项目都需要位于一个块中。例如：[红，红，红，蓝，蓝，绿，绿，绿]。现在我需要提供有关 startIndex 和 count 的信息，以将我的项目数组映射到组。

组的定义可能如下所示：

 groups: [
        { key: 'groupred0', name: 'Color: "red"', startIndex: 0, count: 2, level: 0 },
        { key: 'groupgreen2', name: 'Color: "green"', startIndex: 2, count: 0, level: 0 },
        { key: 'groupblue2', name: 'Color: "blue"', startIndex: 2, …

我一直在使用 Fluent UI 来实现我正在开发的 Excel 加载项的 UI。我需要一种方法来显示一系列不需要用户输入的弹出通知，而只是通知用户发生了某些事情。我想要的是使用像 Callout 小部件这样的东西，它们可以很好地堆叠在一起。

我正在寻找的示例：https://react-bootstrap.github.io/components/toasts/

我没有看到任何类似的小部件，并且想知道是否可以在 Fluent UI 中实现相同的功能，以便我可以保留我的外接程序具有的其他 UI 小部件的外观和感觉。如果这是不可能的，我别无选择，只能使用第三方库，然后调整它的外观和感觉以匹配 Fluent UI。

建议采取什么方法来解决这个问题？

我使用此链接创建了示例 https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist

现在我想在网格中添加分页。请让我知道步骤。

我目前正在尝试在 FluentUI/react-northstar Dropdown 组件的帮助下制作一个下拉菜单。不幸的是，items这个组件的 prop 在下拉列表中只有一个string[]用于渲染名称，但我key也需要一个。

我尝试通过renderItem添加自定义渲染器来实现此目的：

<Dropdown
    renderItem = (Component: React.ElementType, props: any): React.ReactNode => {
      ...
      return <Component key={props.key} content={props.name} />;
    };
    items={dropDownMapper(displayTree[0], 0)}
    ...
/>

该dropDownMapper函数返回一个对象数组，如下所示：[{key: string, name: string}, ...]

这样我就可以在下拉菜单中呈现正确的项目，但我无法与它们交互。我尝试添加onClickto <Component/>，但由于我使用该框架，我不确定<Dropdown/>单击该项目时期望我做什么，并且文档并没有真正的帮助。

不确定这个问题是否适合这个论坛，但我找不到其他地方。

我们的设计团队基于流畅的 ui 库构建了他们的设计系统，如此处所述。他们从这里下载了设计。

不幸的是，我们的工程团队正在使用 Angular，因此我们自然而然地选择了 Web组件，但令我们惊讶的是，该库完全不同——不同的组件集、功能，当然还有完全不同的设计。

我认为所有的 Fluentui 平台都应该是相同设计的实现/接口。为什么情况并非如此？我缺少什么？

有没有一种方法可以在 Angular 中使用此处描述的设计？（除了在我的 Angular 项目中实际使用 React 库）。

感谢您的帮助，如果这个问题不适合本论坛，我们深表歉意。