语义UI(React):通过在移动设备上更改为水平来响应垂直菜单

时间:2017-02-07 22:19:29

标签: javascript css reactjs semantic-ui semantic-ui-react

我正在使用垂直菜单(semantic ui react)。这是我的结构:

<Grid>
    <Grid.Column mobile={16} tablet={5} computer={5}>
        <div className='ui secondary pointing menu vertical compact inherit'>
            <a className='item'>
                Element
            </a>
        </div>
    </Grid.Column>
</Grid>

但我需要将菜单变成移动设备上的水平图标菜单。是否有可能以这种方式响应?我的意思是在计算机上它应该是一个带有文本项的垂直菜单,在移动设备上它应该用图标水平显示......

2 个答案:

答案 0 :(得分:2)

我认为您正在寻找stackable menu变体。此外,您可以使用网格visibility来处理更复杂的事情。

答案 1 :(得分:0)

我一直在寻找响应式react-ui-ui菜单,它看起来不错,上面有一个汉堡包图标

https://codesandbox.io/s/325y47xk36