語義UI可滾動段

我使用語義UI和ReactJS一起使用官方語義UI反應。語義UI可滾動段

我想構建一個類似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選項。

那麼，我怎樣才能讓外層水平滾動，每個卡片段垂直滾動。感謝您的幫助。

來源

2017-06-22 Mendes

試試這個，對我的作品：

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

來源

2018-03-05 22:27:03 ReduxDJ

語義UI可滾動段

回答

相關問題