Question

我使用Semantic UI和ReactJS一起使用官方语义 - 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

试试这个，对我有用：

brew install -f python@2

Answer 2

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

这对我来说很容易。

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

那是我想要的颜色和特定高度。但实际上您可以将细分嵌套在细分中。...因此，如果您设置

class ViewHolderSlider extends RecyclerView.ViewHolder{

<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日（在您提出问题之后）开始，提供了“滚动内容”样式。请参见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可滚动段

3 个答案: