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

问题描述 投票:0回答:1

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

这是我得到的结果:enter image description here

我希望弹出窗口很好地适应文本。认为列的宽度太小以保留所有文本。

帮助赞赏。

javascript css semantic-ui semantic-ui-react
1个回答
0
投票

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

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

enter image description here

我建议在这里再做几件事。

  1. 如果你坚持在这个菜单上使用Popup,你可能想要添加position='bottom left'道具。
  2. 使用整个Menu.Item作为Popup组件的trigger

这两个变化将给你这个:enter image description here

你最好在这个Dropdown上使用Menu组件,但我会根据最初的问题保留我的答案范围。

包含了一个代码框示例,显示了所有这三个变化的工作顺序:https://codesandbox.io/s/n39o5y344p

© www.soinside.com 2019 - 2024. All rights reserved.