语义用户界面语义用户反应网格宽度弹出内

我[m试图建立，使用semantic-ui-反应，菜单喜欢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;

这是结果I'm越来越：

我预计弹出很好地适应文本。注意到列的宽度太小而不能保留所有文本。

帮助赞赏。

来源

2017-06-22 Mendes

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

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

我建议你在这里做一对夫妇的额外的东西。

如果您坚持使用此菜单的弹出菜单，您可能需要将position='bottom left' prop添加到该菜单。
改为使用整个Menu.Item作为Popup组件的trigger。

这两个变化会给你这样的：

您可能会更好使用这个Menu代替Dropdown成分，但我会继续我的答案的基础上，初步范围题。

包括一个codesandbox示例，显示所有这三种工作顺序的变化：https://codesandbox.io/s/n39o5y344p

来源

2018-03-02 16:20:00 brianespinosa

语义用户界面语义用户反应网格宽度弹出内

回答

相关问题