React Semantic UI-菜单项中文本左侧的位置图标

时间:2018-06-28 21:42:42

标签: reactjs semantic-ui semantic-ui-react

使用React Semantic UI的默认外观是

React Semantic UI default look for Menu-items with an icon

这是产生该组件的代码(来自网站)。

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>
    )
  }
}

我想将图标放置在文本的左侧

Icons positioned left of text

任何想法如何做到这一点?

3 个答案:

答案 0 :(得分:3)

好像我设法回答了自己的问题。这不是很好,但是看起来有点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;
}

答案 1 :(得分:0)

我无法使CSS覆盖生效,语义总是能赢得胜利!

我是通过将Icon组件放在Icon.Group中来实现的

...
          <Menu.Item name='about'>
            <Icon.Group size='large'>
              <Icon name='question circle' />
            </Icon.Group>
            About
          </Menu.Item>
...

我使用此页面来获得灵感: https://react.semantic-ui.com/elements/icon/#groups-twitter-group

答案 2 :(得分:-2)

只需使用list,看起来也就和您喜欢的一样