1

我[正在尝试使用语义 UI 反应构建一个类似于语义 UI 文档中示例的菜单，但我在弹出窗口宽度上遇到了问题。这是我的代码：

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;

这是我得到的结果： 在此处输入图像描述

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

帮助表示赞赏。

4

1 回答 1

1

这里的问题是Grid组件semantic-ui是响应式的。如果没有定义宽度，它将采用其父级的大小。这是在样式中，而不是特定于semantic-ui-react. 如果您希望网格水平占用更多空间，您可以style={{width: '300px'}}在Grid组件上设置 a，这将为您提供所需的空间。

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

在此处输入图像描述

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

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

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

这两个更改将为您提供： 在此处输入图像描述

你可能会更好地使用这个Dropdown组件Menu，但我会根据最初的问题保留我的答案范围。

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

于 2018-03-02T16:20:00.603 回答