2017-04-24 53 views
1

想知道是否有人知道如何实现鼠标悬停组件的材料UI列表项(http://www.material-ui.com/#/components/list)?由于“SecondaryText”只允许2行,我试图找到一种方法来显示数据(作者,徽章,团队等)的其余部分。鼠标悬停在一个ListItem

这是我的清单:

<List> 
       {trendingPosts.map(trendingPost => 
       <ListItem 
        leftAvatar={<Avatar src={constants.ASSET_URL + "resources/img/user-default.jpg"} />} 
        //rightIconButton={rightIconMenu} 
        primaryText={trendingPost.title} 
        secondaryText={ 
        <p> 
         <span style={{color: darkBlack}}>{trendingPost.content}</span><br /> 
         {trendingPost.author}<span style={trendingBadge}><img width="5" src="https://img.clipartfest.com/8bcfb3290cdd56968f572b08a125a00b_blue-dot-clip-art-dorothy-clipart-transparent-background_300-300.png" /></span> &gt; {trendingPost.team} 
         <br /> 
         {trendingPost.time} 
        </p> 
        } 
        secondaryTextLines={2} 
       /> 

      )} 
       </List> 

回答

0

你所要做的是扩大ListItem组件,然后向下传递的数据通过道具。

喜欢的东西说ListItemWithHoverrender功能看起来像

render(){ 
    return(
    <div className="list-item-with-hover"> 
     <ListItem/> 
     <div className="list-item-extension"></div> 
    </div> 
    } 
} 

那么我想你可以用这种方式

.list-item-with-hover{ 
    position:relative; 
} 

.list-item-with-hover:hover .list-item-extension{ 
    display:block; 
} 

.list-item-extension{ 
    position:absolute; 
    right:-100%; 
    top:0 
    display:none; 
} 

list-item-with-hoverListItem包装使用CSS和list-item-extension是哪里你会保留你想要显示的其他信息。该list-item-extension与当前值将是正确的,并且默认是隐藏的。在上空盘旋list-item-with-hover它会显示。

当然,您必须将trendingPost对象作为道具传递给新的ListItemWithHover组件,以便您可以在此处使用它。

<List> 
     {trendingPosts.map(trendingPost => <ListItemWithHover trendingPost=trendingPost/>)} 
</List>