使用 React Semantic UI,默认外观是这样的
这是生成该组件的代码(来自网站)。
import React, { Component } from 'react'
import { Icon, Menu } from 'semantic-ui-react'
export default class MenuExampleCompactVertical extends Component {
state = {}
handleItemClick = (e, { name }) => this.setState({ activeItem: name })
render() {
const { activeItem } = this.state
return (
<Menu compact icon='labeled' vertical inverted>
<Menu.Item name='gamepad' active={activeItem === 'gamepad'} onClick={this.handleItemClick}>
<Icon name='gamepad' />
Games
</Menu.Item>
<Menu.Item
name='video camera'
active={activeItem === 'video camera'}
onClick={this.handleItemClick}
>
<Icon name='video camera' />
Channels
</Menu.Item>
<Menu.Item
name='video play'
active={activeItem === 'video play'}
onClick={this.handleItemClick}
>
<Icon name='video play' />
Videos
</Menu.Item>
</Menu>
)
}
}
我想将图标放置在文本左侧,如下所示
有什么想法可以做到这一点吗?
最佳答案
看来我已经回答了我自己的问题。这不是很好,但看起来一点 css 就可以了。
只需将图标向左浮动
i {
float: left;
margin-right: 12px !important;
}
菜单项本身就变成了一个 a
元素
a {
text-align: center;
line-height: 40px;
}
编辑:
如果有人想知道的话,这就是我最终使用的。 CSS 规则使得根据优先级获取自己的规则变得有点复杂。
/****** Sidebar ******/
.ui.icon.menu .item {
line-height: 40px;
padding-right: 500px;
text-align: justify;
font-weight: 600;
}
.ui.vertical.menu .item::before {
height: 0px;
}
.ui.labeled.icon.menu .item > .icon:not(.dropdown) {
float: left;
margin-right: 12px !important;
}
关于reactjs - React Semantic UI - 将图标放置在菜单项中文本的左侧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51091603/