Блог

Главная - Вопросы по программированию - изображение слева от заполнителя в styled.input react

изображение слева от заполнителя в styled.input react

#javascript #css #reactjs #input #styled-components

#javascript #css #reactjs #ввод #styled-компоненты

Вопрос:

я пытаюсь добиться такого дизайна: goalimg

и это то, что у меня есть на данный момент: currentimg

Мне нужно, чтобы значок поиска отображался слева от текста-заполнителя в этом вводе. Я использую стилизованный компонент ввода в react javascript. Это мой стиль CSS для ввода:

 const SearchBar = styled.input`
color: #000000;
margin-top: 20px;
background: #F2F2F7;
padding-left: 35.33px;
border-radius: 50px;
height: 30px;

border: 1px solid ${props => props.theme.gray2};
padding-top: 7px;
padding-bottom: 7px;
margin-left: 14px;
margin-right: 14px;
outline-width: 1px;
display: flex;
flex-direction: row;

`;

и это в методе render():

<SearchBar placeholder="Search Chats"></SearchBar>

Как я могу поместить изображение во входные данные слева от текста-заполнителя?

Комментарии:

1. посмотрите на использование css ‘position: absolute;’ для размещения значка поверх входных данных.

2. @JDavies как бы мне включить изображение?

3. если вы добавите в <head> вашего index.html (или где бы вы ни рендерили свое приложение). <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> затем вы можете добавить <i className="fa fa-search" aria-hidden="true"></i> в свой код react. Пока вы в Сети. вы можете получить доступ ко многим значкам здесь: ссылка .

4. @JDavies хорошо, я смог это сделать, но куда мне включить <i className=»fa fa-search» aria-hidden=»true»></i> чтобы оно было слева от текста-заполнителя в моей панели ввода?

5.Оберните как входные данные, так и значок в div или span. Укажите диапазон, position: relative; а затем укажите i position: absolute; top: 0px; left: 0px; , отрегулируйте верхнее и левое значения, чтобы получить правильное размещение. Чтобы убедиться, что значок расположен слоями выше значка. Дайте i z-index: 1;

Ответ №1:

в вашем index.html (или где бы вы ни рендерили свое приложение) добавьте в заголовок:

 <head>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<div id="app"></div>

в вашем файле React добавьте:

  <span className='search-bar'>
    <i className="fa fa-search" aria-hidden="true"></i>
    <input></input>
 </span>

в вашем Css-файле добавьте:

 .search-bar { 
  position: relative;
  input { padding: 12px; }
  .fa-search { 
    position: absolute; 
    padding: 12px;
    top: 2px; 
    left: 5px; 
    z-index: 1; 
  }
}

или, вместо заполнения, вы можете использовать

 .fa-search { 
  position: absolute; 
  top: 2px; 
  left: 5px; 
  z-index: 1; 
}

Отрегулируйте значение top amp; left, чтобы расположить его точно.

Плюс любой другой стиль ввода.

вы можете получить доступ ко многим значкам здесь: ссылка