语义 UI 可滚动段

Question

我正在使用语义 UI 和 ReactJS 一起使用官方语义-ui-react.

我想制作uild 一个类似 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%，将内部段限制为最大高度，迫使它们进入溢出模式，它们都已设置为auto，如果滚动条溢出，它会添加滚动条……而且，所有的段都是可滚动的……如果你需要特定的宽度，或者如果你想让父段真的很宽，你可以添加 minWidth。” 理论上应该可以。

Answer 3

自 2017 年 7 月 3 日起（就在您的问题之后），有 "scrolling content" 样式可用。请参阅 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>

语义 UI 可滚动段

Semantic UI scrollable Segment

javascript

css

semantic-ui

semantic-ui-react