Как ограничить максимальное количество строк элементов в DetailsList? - PullRequest
Новая
       4

Как ограничить максимальное количество строк элементов в DetailsList?

0 голосов
/ 24 марта 2020

Как мне указать DetailsList, чтобы он отображал только X строк и полосу прокрутки для доступа к остальным? Я уверен, что просто упускаю что-то довольно очевидное.

Я могу сделать это, передав styles для root, но это вызывает как вертикальную, так и горизонтальную полосу прокрутки, и я уверен, что это не так правильный способ сделать это с помощью пользовательского интерфейса Fabri c.

Вот минимальный пример, показывающий, как это делается: 

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, ¹ хотя я хочу сделать это с помощью пользовательского интерфейса Fabri c way ...: -)

¹ (не потому, что CSS взломан, это не так, а потому, что я подозреваю, что есть "правильный" способ сделать это с помощью пользовательского интерфейса Fabri c)

1 Ответ

1 голос
/ 27 марта 2020

Джон Рудделл указал, что примеры ограничены в вертикальном размере. Они делают это, помещая весь пример в контейнер с этим 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 Fabri c» способом. 

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>
...