Material-ui: [TextField] Adicionar ícone prop ao campo de texto

Conforme apontado por # 3032, pode parecer

e # 3038 devemos ser capazes de adicionar um ícone à esquerda e à direita.

também seria ótimo ver o prefixo e o sufixo

Eu gostaria de algo assim. Você está trabalhando nisso?

Quanto tempo vai demorar até que seja lançado?

Eu acho que isso deve ser estendido para a entrada de preenchimento automático também, seria muito útil.

Poderia haver uma maneira de adicionar um ícone com validações / erros TextField também?

Acho que deve se aplicar a todos os campos de "formulário", incluindo SelectField.

Eu faço isso usando TextField dentro de ListItem ou MenuItem. Coloque um TextField dentro de ListItem e use os adereços leftIcon ou rightIcon para obtê-lo.

Eu faço isso usando TextField dentro de ListItem ou MenuItem.

Acho que é a abordagem certa. Eu preferiria usar composição em vez de lógica adicional no TextField .
No entanto, estou me perguntando se ListItem ou MenuItem foram projetados com esse caso de uso em mente.
Acho que poderíamos ter um componente mais específico para fazer isso. Como <TextFieldIcon />

Acho que o melhor seria tê-lo no que parece ser ListItem como mostrado aqui: https://material.google.com/components/text-fields.html#text -fields-single-line- campo de texto

E talvez o tenha como uma opção semelhante a rightCheckbox , mas então rightField , e possível suporte dando-lhe um array de max. 2 elementos, como TextField e / ou SelectField , como mostrado naquele exemplo de telefone / calendário.

Isso pode economizar muito espaço, especialmente no celular, e aborrecimento, pois não é necessário ajustar o css corretamente para alinhá-los todos.

O problema de usar um Textfield aninhado com ListItem é que ... a menos que esteja faltando alguma coisa, torna-se impossível tabular para o próximo Textfield em seu formulário.

Por esta razão, é preferível ter um autônomo como sugerido por @oliviertassinari ou simplesmente um adereço adicional que pode ser definido em , embora o último pareça desanimado por # 4027. Alguém encontrou uma solução alternativa que funcione?

Existe algum progresso ou solução temporária para resolver o problema original?

@iamzhouyi tente usar algo assim para a experiência de preenchimento automático

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

Alguém com algum progresso nisso? Se alguém já começou, eu adoraria ajudar, se não, eu mesmo daria uma olhada?

Não parece @oshalygin , note que foi adicionado à lista de verificação em # 6566, então você pode querer rastrear o progresso lá!

Seria uma ótima adição.

@oshalygin Se você for investigar isso, sugiro trabalhar fora do branch next - não estamos priorizando novos recursos em master . Além disso, como é feito de componentes combináveis, você deve achar mais fácil.

Também acho que seria ótimo ter um progresso circular nos campos de texto para verificação em tempo real do valor do campo de texto.

Uau, vejo que foi inaugurado há 1,5 anos! Alguma atualização para isso? Tentei adicionar hacks de CSS (e antes do conteúdo) que funcionam, mas preciso de um controle mais refinado, pois preciso estilizá-lo ainda mais, fazer com que desapareça ou desapareça dependendo do estado e, mais especificamente, esteja dentro do campo de texto . Também tentei mexer com o HintText / placeholder, mas todos eles são totalmente conflitantes e caóticos uns com os outros. 😞

A maneira mais fácil de obter o ícone adjacente ao campo de texto é envolver o campo e o ícone em uma div que pode conter o ícone posicionado de forma absoluta.

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

Se você quiser à esquerda, basta adicionar um textIndent ao campo e alterar o posicionamento à esquerda.

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

Se você quiser ter ícones dinâmicos, altere o método onChange do campo para atualizar o estado que pode alterar o ícone. Se você quiser deixar isso mais limpo, você pode colocá-lo em um componente e chamá-lo de IconTextField como } .... outros atributos />

@bradrisse funciona muito bem, graças a Deus eu li o tópico inteiro, encontrei a resposta que estava procurando no último comentário

É possível adicionar como adereços?
_ floatingLabelText = 'Rótulo'
hintText = 'Texto de dica'
errorText = { ${<MoreVertIcon />} Error Text }
multiLine
/> _

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

// campo de texto com ícone
const IconTextField = (props) => (

ícone = {"pessoa"}
hintText = {props.label}
tipo = {props.type?
fullWidth = {true}
/>

)

Eu acredito que isso pode ser fechado, certo? https://material-ui-next.com/demos/text-fields/#input -adornments

@stunaz Não acho que seja isso que as pessoas estão pedindo aqui.

@oliviertassinari O único outro tipo que posso ver nas especificações é "significante do ícone":

Significante do ícone

Os ícones descrevem o tipo de entrada que um campo de texto exige. Eles são exibidos à esquerda do campo de texto.

Parece que isso pode ser alcançado com apenas algumas linhas de código:

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

[...]

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

Um exemplo nos documentos nos permitiria encerrar esse problema?

@mbrookes , tenho uma ideia. Visto que o campo de texto não é o único componente que deseja um decorador de ícone, talvez possamos fazer um invólucro que anexará o ícone a um elemento.

Exemplo

Para campo de texto

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

Para botão

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

Vantagem

Este método não interromperá ou poluirá a API atual, portanto, não haverá alterações significativas.

Preocupação

Se este IconDecorator tiver que ser implementado, ele deve ser incluído nesta biblioteca ou em outra biblioteca externa?

@wongjiahau A única dificuldade que vejo nisso é que o alinhamento vertical é específico do componente, então ele teria que verificar o tipo de filho e ajustar suas margens de forma adequada, mas isso pode ser conseguido.

Se isso acontecer, faz sentido fazer parte do MUI.

@oliviertassinari desculpe

Parece que ainda está aberto? Foi eliminado ou ainda está por resolver?

@BlakeBurnette Esse problema é sobre a exposição de um componente específico para lidar com este caso de problema. Não estou 💯% convencido de que seja necessário, dadas as duas alternativas a seguir. Alguém deseja adicionar uma demonstração à documentação para que possamos resolver este problema?

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