我[尝试使用semantic-ui-react构建一个像Semantic UI documentation上的示例菜单,但我在弹出窗口宽度上遇到问题。这是我的代码:
import React, { Component } from 'react';
import { Menu, Icon, Dropdown, Popup, Grid, List } from 'semantic-ui-react';
import menulogo from '../../images/logo.svg';
class AppMenu extends Component {
render() {
return (
<div>
<Menu>
<Menu.Item>
<img alt='Logo' src={menulogo}/>
<strong color='blue'>Logo</strong>
</Menu.Item>
<Menu.Item>
<Icon name='browser' color='blue'/>
Menu
<Popup
trigger={<Icon name='dropdown'/>}
position='bottom center'
flowing
hoverable
>
<Grid
columns={3}
centered
divided
relaxed
>
<Grid.Column textAlign='center'>
<List relaxed link>
<List.Header as='h4'>Group 1</List.Header>
<List.Item as='a'>Option 1</List.Item>
<List.Item as='a' >Option 2</List.Item>
<List.Item as='a' >Option 3</List.Item>
<List.Item as='a' >Option 4</List.Item>
</List>
</Grid.Column>
<Grid.Column textAlign='center'>
<List relaxed link>
<List.Header as='h4'>Group 2</List.Header>
<List.Item as='a'>Option 1</List.Item>
<List.Item as='a' >Option 2</List.Item>
<List.Item as='a' >Option 3</List.Item>
<List.Item as='a' >Option 4</List.Item>
</List>
</Grid.Column>
</Grid>
</Popup>
</Menu.Item>
</Menu>
</div>
);
}
}
export default AppMenu;
我希望弹出窗口很好地适应文本。认为列的宽度太小以保留所有文本。
帮助赞赏。
这里的问题是Grid
中的semantic-ui
组件是响应性的。如果没有定义宽度,它将采用它的父级的大小。这是风格,而不是semantic-ui-react
特有的。如果您希望网格水平占用更多空间,可以在style={{width: '300px'}}
组件上设置Grid
,这将为您提供所需的空间。
style={{width: '300px'}}
组件上添加Grid
。我建议在这里再做几件事。
position='bottom left'
道具。Menu.Item
作为Popup
组件的trigger
。你最好在这个Dropdown
上使用Menu
组件,但我会根据最初的问题保留我的答案范围。
包含了一个代码框示例,显示了所有这三个变化的工作顺序:https://codesandbox.io/s/n39o5y344p