Как добавить 2 пользовательских иконки в компонент ввода реагировать semanti c UI - PullRequest
Новая
       24

Как добавить 2 пользовательских иконки в компонент ввода реагировать semanti c UI

0 голосов
/ 21 апреля 2020

Я пытаюсь добавить две иконки для компонента ввода (панель поиска), как показано на рисунке. [] [1] Мои иконки являются пользовательскими, а не значениями по умолчанию в semanti c UI. В документации я нахожу только примеры того, как работать с одним. Кто-нибудь знает, возможно ли это? Я оставляю здесь реакцию и отрывки. Спасибо!

[1]: https://i.stack.imgur.com/cgcQc.jpgInput Компонент 

import React from 'react';
import { Button, Dropdown, Image, Input, Popup } from 'semantic-ui-react';
import { Link } from '@reach/router';
import { home } from '../config';
import './TopNav.css';

const avatar = (<Image src={`${home}/assets/images/nan.jpg`} avatar />);
const notificationsTrigger = (
  <Button circular className="icon-notification" icon="alarm" />);

const TopNav = ({ toggleSidebar }) => (
  <div id="nav-top" className="flex-container">
    <Button
      id="menu-button"
      className="flex-item"
      icon="sidebar"
      circular
      onClick={toggleSidebar}
    />
    <Input
      icon="search"
      className="flex-item"
      placeholder="Search..."
    />
    <div className="flex-item">
      <Link to={`${home}/login`}>
        <Popup
          trigger={notificationsTrigger}
          content="Hello. This is a mini popup"
          size="mini"
          inverted
        />
      </Link>
      <Dropdown trigger={avatar} pointing="top right">
        <Dropdown.Menu>
          <Dropdown.Item text="New" />
          <Dropdown.Item text="Open..." description="ctrl + o" />
          <Dropdown.Item text="Save as..." description="ctrl + s" />
          <Dropdown.Item text="Rename" description="ctrl + r" />
          <Dropdown.Item text="Make a copy" />
          <Dropdown.Item icon="folder" text="Move to folder" />
          <Dropdown.Item icon="trash" text="Move to trash" />
          <Dropdown.Divider />
          <Dropdown.Item text="Download As..." />
          <Dropdown.Item text="Publish To Web" />
          <Dropdown.Item text="E-mail Collaborators" />
        </Dropdown.Menu>
      </Dropdown>
    </div>
  </div>
);

export default TopNav;
#nav-top {
  margin-bottom: 10px;
}

#nav-top .icon-notification {
  color: #bbb;
  background: #f9f9f9;
}

#nav-top .avatar {
  height: 36px;
  width: 36px;
}

#nav-top .ui.dropdown {
  margin-left: 10px;
}

#nav-top .ui.dropdown > .dropdown.icon {
  margin-left: 5px;
}

#nav-top .ui.dropdown .menu {
  left: auto;
  right: 0;
}

#menu-button {
  padding: 0;
  height: 30px;
  width: 30px;
  line-height: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
...