javascript - 弹出窗口内具有语义 ui-react 网格宽度的语义 UI

Question

我[正在尝试使用 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;

这是我得到的结果:

我希望弹出窗口能很好地适应文本。发现列的宽度太小，无法保留所有文本。

感谢帮助。

Answer 1

这里的问题是 semantic-ui 中的 Grid 组件是响应式的。如果未定义宽度，它将采用其父元素的大小。这是在样式中而不是特定于 semantic-ui-react。如果你想让你的网格在水平方向上占据更多的空间，你可以在你的 Grid 组件上设置一个 style={{width: '300px'}} 这会给你你想要的空间。

1. 在您的 Grid 组件上添加 style={{width: '300px'}}。

我建议在这里做一些额外的事情。

1. 如果您坚持为此菜单使用 Popup，您可能需要向其添加 position='bottom left' 属性。

2. 使用整个 Menu.Item 作为 Popup 组件的 trigger。

这两个变化会给你这个:

您最好在此 Menu 上使用 Dropdown 组件，但我会根据最初的问题保留我的答案范围。

包含一个 codesandbox 示例，显示工作顺序中的所有这三个更改:https://codesandbox.io/s/n39o5y344p