javascript - 如何限制详细信息列表中的最大项目行数？

Question

我如何告诉DetailsList仅显示 X 行和用于访问其余部分的滚动条？我确信我只是错过了一些相当明显的东西。

我可以通过传入 root 的 styles 来实现，但这会导致垂直和水平滚动条，我确信这不是正确的方法使用 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 (
        <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 的方式来实现......:-)

<小时/>

1 (不是因为 CSS 很 hacky，它不是；而是因为我怀疑有一种“正确”的方法可以使用 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>