语义UI滚动段

Question

我正在使用官方UI-ui-react将Semantic UI和ReactJS一起使用。

我想构建一个像Trello这样的应用程序并在上面放卡片。卡片将堆叠一个主题，并且可以在一个主题内垂直滚动，在所有主题上水平滚动。

我使用下面的代码，自然而然地，我得到了堆叠的段，具有大的宽度，没有滚动控件。

import React, { Component } from 'react';
import { Segment, Card, Header } from 'semantic-ui-react';


class TestPanel extends Component {

    getCards = () => {

        let i = 0;
        let cards = [];

        for (i = 0; i < 10; i++) {

            let card = (
                    <Card key={i}>
                        <Card.Header>
                            Item {i}
                        </Card.Header>
                        <Card.Meta>
                            ItemMeta {i}
                        </Card.Meta>
                    </Card>
                );
            cards.push(card);
        }

        return cards;
    };

    render () {

        let cards = this.getCards();

        return (
            <div>
                <Segment>
                    <Segment>
                        <Header>Segment 1</Header>
                        {cards}
                    </Segment>
                    <Segment>
                        <Header>Segment 2</Header>
                        {cards}
                    </Segment>
                </Segment>
            </div>
            );
    }

}

export default TestPanel;

我已经检查了段，并且scrollable在任何命令上都没有选项。

因此，如何使外部部分水平滚动并且每个卡部分垂直滚动。感谢您的帮助。

Answer 1

试试这个，对我有用：

  <Segment style={{overflow: 'auto', maxHeight: 200 }}>
  </Segment>