如何限制 DetailsList 中项目行的最大数量？

Question

如何让 DetailsList 只显示 X 行和滚动条以访问其余行？我确定我只是遗漏了一些相当明显的东西。

我可以为 root 传递 styles，但这会导致垂直和水平滚动条，我确信这不是使用 [=38] 的正确方法=]布料。

这是一个最小的例子，展示了这样做的方式：

const { useState } = React;
const { DetailsList } = Fabric;

const items = [
"alpha", "bravo", "charlie", "delta", "echo",
"foxtrot", "golf", "hotel", "indigo", "juliet",
"lima", "mike", "november", "oscar", "papa",
"romeo", "sierra", "tango", "uniform", "victor",
"whiskey", "x-ray", "yankee", "zulu"
].map(name => ({name, key: name}));

const columns = [
    {
        name: "Name",
        fieldName: "name"
    }
];

const App = () => {
    return (
        <DetailsList
            columns={columns}
            items={items}
            styles={{root: {maxHeight: "15em"}}}
        />
    );
};

ReactDOM.render(<App />, document.getElementById("root"));

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>
<script src="//unpkg.com/office-ui-fabric-react@7/dist/office-ui-fabric-react.js"></script>
<script src="//unpkg.com/@uifabric/react-hooks@7/dist/react-hooks.js"></script>

我不想用 CSS 来解决这个问题，¹ 不过，我想用 UI Fabric 的方式来做...:-)

¹ （不是因为 CSS 是 hacky，它不是；而是因为我怀疑有 "correct" 方法可以用 UI Fabric 做到这一点）

Answer 1

John Ruddell 指出示例在垂直尺寸上有限制。他们通过将整个示例放在一个容器中来做到这一点 CSS:

.example-170 {
    max-height: 80vh;
    padding-top: 20px;
    padding-right: 4px;
    padding-bottom: 20px;
    padding-left: 4px;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
}

...反过来，在一个尺寸有限的容器中。

这也适用于我的示例案例。所以也许他们确实把这个留给 CSS，我找不到任何属性来以更 "UI Fabric" 的方式来做。

const { useState } = React;
const { DetailsList } = Fabric;

const items = [
"alpha", "bravo", "charlie", "delta", "echo",
"foxtrot", "golf", "hotel", "indigo", "juliet",
"lima", "mike", "november", "oscar", "papa",
"romeo", "sierra", "tango", "uniform", "victor",
"whiskey", "x-ray", "yankee", "zulu"
].map(name => ({name, key: name}));

const columns = [
    {
        name: "Name",
        fieldName: "name"
    }
];

const App = () => {
    return (
        <div className="container">
            <DetailsList
                columns={columns}
                items={items}
            />
        </div>
    );
};

ReactDOM.render(<App />, document.getElementById("root"));

.container {
    max-height: 50vh;
    overflow-x: auto;
    overflow-y: auto;
    padding-top: 20px;
    padding-right: 4px;
    padding-bottom: 20px;
    padding-left: 4px;
    position: relative;
}

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>
<script src="//unpkg.com/office-ui-fabric-react@7/dist/office-ui-fabric-react.js"></script>
<script src="//unpkg.com/@uifabric/react-hooks@7/dist/react-hooks.js"></script>

如何限制 DetailsList 中项目行的最大数量？

How do I limit the max number of item rows in a DetailsList?

javascript

reactjs

office-ui-fabric