Question

我尝试使用语义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

此处的问题是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

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

1 个答案: