react/semantic-ui:如何获取全屏片段

Question

我想构建一个类似于semantic-ui：http://semantic-ui.com/examples/homepage.html的主页示例的布局

第一个垂直的黑色部分几乎具有完整的高度。它是由masthead类完成的，但是我不明白这个类是从哪里来的。

我使用的是react，所以这是我到目前为止的布局：

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

但是有了这个，第一段就不会有完整的高度。

Answer 1

看看这款带有SUIR的example，source也是可用的。masthead类是在SUI示例中定义的，并不是框架的一部分，这些行为是通过自定义样式实现的：

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