reagieren/semantisch-ui: Wie ein Vollbild-Segment bekommen

Question

Ich mag würde ein Layout wie die Homepage Beispiel semantischer-ui bauen: http://semantic-ui.com/examples/homepage.html

Das erste vertikale schwarze Segment nahezu voller Höhe. Es wird von der Klasse masthead gemacht, aber ich verstehe nicht, woher diese Klasse kommt.

Ich verwende reagieren, so ist dies mein Layout so weit:

render() { 
    return (
     <div> 
      <Segment vertical inverted> 
       <p>Main</p> 
      </Segment> 
      <Segment vertical> 
       <p>First</p> 
      </Segment> 
     </div> 
    ) 
} 

Aber mit diesem ersten Segment nicht die volle Höhe aufweisen.

Answer 1

Werfen Sie einen Blick auf diese example mit SUIR, source ist auch verfügbar. masthead Klasse ist in SUI Beispiel definiert und ist nicht Teil des Frameworks, dieses Verhalten wurde mit benutzerdefiniertem Styling implementiert:

<Segment 
    inverted 
    textAlign='center' 
    style={{ minHeight: 700, padding: '1em 0em' }} 
    vertical 
>