Material-ui: [TextField] Добавить значок в текстовое поле

Как указано в № 3032, это может выглядеть как

и # 3038, мы сможем добавить значок слева и справа.

также было бы здорово увидеть префикс и суффикс

Я бы хотел что-нибудь подобное. Вы над этим работаете?

Как скоро это будет выпущено?

Я думаю, что это следует распространить и на ввод автозаполнения, было бы очень полезно.

Может ли быть способ добавить значок с проверками / ошибками TextField?

Я думаю, это должно применяться ко всем полям «формы», включая SelectField.

Я делаю это с помощью TextField внутри ListItem или MenuItem. Поместите TextField внутри ListItem, затем используйте свойства leftIcon или rightIcon для его достижения.

Я делаю это с помощью TextField внутри ListItem или MenuItem.

Я считаю, что это правильный подход. Я бы предпочел использовать композицию вместо дополнительной логики в TextField .
Однако мне интересно, были ли ListItem или MenuItem разработаны с учетом этого варианта использования.
Я думаю, что для этого у нас может быть более конкретный компонент. Как <TextFieldIcon />

Я думаю, что лучше всего было бы иметь это в том, что выглядит как ListItem как показано здесь: https://material.google.com/components/text-fields.html#text -fields-single-line- текстовое поле

И, возможно, он будет аналогичным параметру rightCheckbox , но тогда rightField и возможная поддержка, предоставив ему массив макс. 2 элемента, например TextField и / или SelectField , как показано в этом примере телефона / календаря.

Это может сэкономить много места, особенно на мобильных устройствах, и избавить от лишних хлопот, так как вам не нужно настраивать CSS, чтобы они все выровнялись.

Проблема с использованием текстового поля, вложенного в ListItem, заключается в том, что ... если я чего-то не упускаю, становится невозможным перейти к следующему текстовому полю в вашей форме.

Уже по этой причине предпочтительнее иметь автономный как предлагает @oliviertassinari или просто дополнительная опора, которую можно установить на , хотя последнее, похоже, обескураживает # 4027. Кто-нибудь нашел рабочий обходной путь?

Есть ли прогресс или временное решение для решения исходной проблемы?

@iamzhouyi попробуйте использовать что-то подобное для автозаполнения

<Menu disableAutoFocus>
  <MenuItem leftIcon={<SearchIcon color='#fff'/>} disabled>
    <AutoComplete hintText='Search' />
  </MenuItem>
</Menu> 

У кого-нибудь есть прогресс в этом? Если бы кто-то начал, я бы с радостью помог, если бы не сам?

Не похоже, что это @oshalygin , обратите внимание, что он был добавлен в контрольный список на # 6566, хотя, возможно, вы захотите отслеживать там прогресс!

Было бы отличным дополнением.

@oshalygin Если вы собираетесь изучить это, я бы посоветовал отработать ветку next - мы не уделяем приоритетного внимания новым функциям на master . Кроме того, поскольку он состоит из составных компонентов, вам будет проще.

Я думаю, также было бы здорово иметь круговой прогресс в текстовых полях для проверки значения текстового поля в реальном времени.

Вау, я вижу, это открыли 1,5 года назад! Есть какие-нибудь обновления к этому? Я пробовал добавлять CSS-хаки (и перед контентом), какой вид работы, но мне нужен более мелкозернистый элемент управления, так как мне нужно его стилизовать дальше, он исчезнет или исчезнет в зависимости от состояния, а точнее, будет внутри текстового поля . Пробовал возиться также с HintText / placeholder, но все они полностью противоречат друг другу и хаотичны. 😞

Самый простой способ получить значок рядом с текстовым полем - обернуть поле и значок в div, который может содержать значок с абсолютным позиционированием.

<div style={{position: 'relative', display: 'inline-block'}}>
      <SearchIcon style={{position: 'absolute', right: 0, top: 15, width: 20, height: 20}}/>
      <TextField
           hintText="Search by Name"
           onChange={_.debounce((event, value) => this.handleSearch(value), 500)}
        />
</div>

Если вы хотите, чтобы это было слева, просто добавьте textIndent в поле и измените расположение слева.

<div style={{position: 'relative', display: 'inline-block'}}>
       <SearchIcon style={{position: 'absolute', left: 0, top: 15, width: 20, height: 20}}/>
       <TextField
              style={{textIndent: 30}}
              hintText="Search by Name"
              onChange={_.debounce((event, value) => this.handleSearch(value), 500)}
        />
</div>

Если вы хотите иметь динамические значки, измените метод onChange в поле, чтобы обновить состояние, которое может изменить значок. Если вы хотите сделать это более чистым, вы можете поместить его в компонент и называть его IconTextField, например } .... другие атрибуты />

@bradrisse отлично работает, слава богу, я прочитал всю

Можно ли добавить в качестве реквизита?
_ floatLabelText = 'Этикетка'
hintText = 'Текст подсказки'
errorText = { ${<MoreVertIcon />} Error Text }
multiLine
/> _

import ActionHome from 'material-ui/svg-icons/action/home';
<TextField
floatingLabelText={<SvgIconComponent/>}
floatingLabelFixed={true}
/>

// текстовое поле со значком
const IconTextField = (реквизит) => (

icon = {"человек"}
hintText = {props.label}
type = {props.type?
fullWidth = {истина}
/>

)

Я считаю, что это можно закрыть, правда? https://material-ui-next.com/demos/text-fields/#input -adornments

@stunaz Я не думаю, что это то, о чем здесь просят.

@oliviertassinari Единственный другой тип, который я вижу в спецификации, - это "Icon signifier":

Значок, означающий

Иконки описывают тип ввода, который требуется для текстового поля. Они отображаются слева от текстового поля.

Кажется, этого можно достичь с помощью всего нескольких строк кода:

const styles = theme => ({
  icon: {
    margin: '20px 16px 0 0',
    color: theme.palette.action.active,
  },
});

[...]

<div>
    <Person className={classes.icon} />
    <TextField label="Name" />
</div>

Может ли пример в документации закрыть эту проблему?

@mbrookes У меня есть идея. Поскольку текстовое поле - не единственный компонент, которому нужен декоратор значков, возможно, мы сможем создать оболочку, которая будет добавлять значок к элементу.

Пример

Для текстового поля

<IconDecorator icon={<PeopleIcon/>} position="left" iconStyle={customStyle}>
    <TextField label="Name"/>
</IconDecorator>

Для кнопки

<IconDecorator icon={<ArrowRightIcon/>} position="right" iconStyle={customStyle}>
    <Button raised={true}>Go</Button>
</IconDecorator>

Преимущество

Этот метод не нарушит и не испортит текущий API, поэтому критических изменений не будет.

Беспокойство

Если этот IconDecorator должен быть реализован, должен ли он быть включен в эту библиотеку или другую внешнюю библиотеку?

@wongjiahau Единственная трудность, которую я вижу в этом, заключается в том, что вертикальное выравнивание зависит от компонента, поэтому ему нужно будет проверить его дочерний тип и соответствующим образом настроить его поля, но это может быть достигнуто.

Если это будет продолжаться, имеет смысл стать частью MUI.

@oliviertassinari извиняюсь за то, что

Кажется, это все еще открыто? Его выгнали или он все еще требует решения?

@BlakeBurnette Эта проблема

https://codesandbox.io/s/29yj0lr7p

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "material-ui/styles";
import Input, { InputLabel, InputAdornment } from "material-ui/Input";
import { FormControl } from "material-ui/Form";
import TextField from "material-ui/TextField";
import Grid from "material-ui/Grid";
import AccountCircle from "material-ui-icons/AccountCircle";

const styles = theme => ({
  margin: {
    margin: theme.spacing.unit
  }
});

function TextFieldIcons(props) {
  const { classes } = props;

  return (
    <div>
      <FormControl className={classes.margin}>
        <InputLabel htmlFor="demo1">First Name</InputLabel>
        <Input
          id="demo1"
          startAdornment={
            <InputAdornment position="start">
              <AccountCircle />
            </InputAdornment>
          }
        />
      </FormControl>
      <TextField
        className={classes.margin}
        id="demo2"
        label="First Name"
        InputProps={{
          startAdornment: (
            <InputAdornment position="start">
              <AccountCircle />
            </InputAdornment>
          )
        }}
      />
      <div className={classes.margin}>
        <Grid container spacing={8} alignItems="flex-end">
          <Grid item>
            <AccountCircle />
          </Grid>
          <Grid item>
            <TextField id="demo2" label="First Name" />
          </Grid>
        </Grid>
      </div>
    </div>
  );
}

TextFieldIcons.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(TextFieldIcons);