javascript - 语义 UI 可滚动段

Question

我正在使用 Semantic UI 和 ReactJS，使用官方的 semantic-ui-react。

我想构建一个类似 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>

Answer 2

可能永远以后，但我也在寻找。

这对我来说很容易。

<Segment color="teal" raised style={{ overflow: 'auto', maxHeight: '27em' }}>

那是我想要的颜色和特定高度。但你实际上可以在段内嵌套段....所以如果你设置

<Segment style={{ overflow: 'auto', maxHeight: '50vh' }}>
  <Segment.Group horizontal>
    <Segment style={{ overflow: 'auto' }}> segment 1 </Segment>
    <Segment style={{ overflow: 'auto' }}> segment 2 </Segment>
    <Segment style={{ overflow: 'auto' }}> segment 3 </Segment>
  </Segment.Group>
</Segment>

这应该将 3 个片段彼此相邻放置在最多为视口高度 50% 的父片段中，将内部片段限制为最大高度，强制它们进入溢出模式，它们都已设置为自动，这将添加滚动条如果它们溢出..并且所有段都可滚动..如果您需要具有特定宽度或者如果您希望父段真的很宽，您可以添加 minWidth。理论上应该可以工作。

Answer 3

自 2017 年 7 月 3 日起（就在您提出问题之后），可以使用“滚动内容”样式。请参阅https://github.com/Semantic-Org/Semantic-UI/issues/4335中的结束说明

模态示例：

<div class="ui modal">
  <div class="header">Header</div>
  <div class="scrolling content">
    <p>Very long content goes here</p>
  </div>
</div>