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

Question

我想做一个uild 像semantic-ui主页示例的布局：http://semantic-ui.com/examples/homepage.html

第一个垂直黑色段几乎是全高。它是由 masthead class 完成的，但我不明白这个 class 是从哪里来的。

我正在使用 React，所以这是我目前的布局：

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

但是第一段没有全高。

Answer 1

看看这个 example with SUIR, source 也是可行的。 masthead class 在 SUI 示例中定义，不是框架的一部分，这些行为是使用自定义样式实现的：

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