Material-ui: [TextField] Ajouter une icône prop au champ de texte

Comme l'a souligné #3032, cela pourrait ressembler à

et #3038 nous devrions pouvoir ajouter une icône à gauche et à droite.

ce serait aussi bien de voir le préfixe et le suffixe

J'aimerais quelque chose comme ça. Travaillez-vous là-dessus ?

Combien de temps faudra-t-il avant que cela ne soit publié?

Je pense que cela devrait également être étendu à la saisie semi-automatique, ce serait très utile.

Pourrait-il y avoir un moyen d'ajouter une icône avec les validations/erreurs TextField également ?

Je pense que cela devrait s'appliquer à tous les champs "formulaires", y compris SelectField.

J'y arrive en utilisant TextField dans ListItem ou MenuItem. Mettez un TextField dans ListItem puis utilisez les accessoires leftIcon ou rightIcon pour y parvenir.

J'y arrive en utilisant TextField dans ListItem ou MenuItem.

Je pense que c'est la bonne approche. Je préférerais utiliser la composition plutôt que la logique supplémentaire dans le TextField .
Cependant, je me demande si ListItem ou MenuItem ont été conçus avec ce cas d'utilisation à l'esprit.
Je pense que nous pourrions avoir un composant plus spécifique pour le faire. Comme un <TextFieldIcon />

Je pense que le mieux serait de l'avoir dans ce qui ressemble à un ListItem comme montré ici : https://material.google.com/components/text-fields.html#text -fields-single-line- champ de texte

Et peut-être l'avoir comme option similaire à rightCheckbox , mais alors rightField , et un support possible en lui donnant un tableau de max. 2 éléments, comme TextField et/ou SelectField , comme illustré dans cet exemple de téléphone/calendrier.

Cela pourrait économiser beaucoup d'espace, en particulier sur mobile, et des tracas, sans avoir besoin de modifier le css juste pour les aligner tous.

Le problème avec l'utilisation d'un champ de texte imbriqué avec ListItem est que... à moins que je manque quelque chose, il devient impossible de passer au champ de texte suivant dans votre formulaire.

Pour cette seule raison, il est préférable d'avoir un comme suggéré par @oliviertassinari ou simplement un accessoire supplémentaire qui peut être mis sur , bien que ce dernier semble être découragé par le #4027. Quelqu'un a-t-il trouvé une solution de contournement ?

Existe-t-il des progrès ou une solution temporaire pour résoudre le problème d'origine ?

@iamzhouyi essaie d'utiliser quelque chose comme ça pour une expérience de saisie semi-automatique

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

Quelqu'un a-t-il avancé à ce sujet ? Si quelqu'un a commencé, j'aimerais aider, sinon je ferais un tourbillon moi-même ?

Cela n'en a pas l'air @oshalygin , notez qu'il a été ajouté à la liste de contrôle sur # 6566, mais vous voudrez peut-être suivre les progrès là-bas !

Serait un excellent ajout.

@oshalygin Si vous envisagez d'examiner cela, je vous suggère de travailler sur la branche next - nous ne donnons pas la priorité aux nouvelles fonctionnalités sur master . De plus, comme il est composé de composants composables, vous devriez le trouver plus facilement.

Je pense qu'il serait également formidable d'avoir une progression circulaire dans les champs de texte pour une vérification en temps réel de la valeur du champ de texte.

Wow, je vois que cela a été ouvert il y a un an et demi ! Une mise à jour à ce sujet ? J'ai essayé d'ajouter des hacks CSS (& avant le contenu) qui fonctionnent, mais j'ai besoin d'un contrôle plus fin, car je dois le styliser davantage, le faire disparaître ou disparaître en fonction de l'état, et plus précisément, être à l'

Le moyen le plus simple d'obtenir l'icône adjacente au champ de texte consiste à envelopper le champ et l'icône dans un div pouvant contenir l'icône positionnée de manière absolue.

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

Si vous le souhaitez à gauche, ajoutez simplement un textIndent au champ et modifiez le positionnement vers la gauche.

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

Si vous souhaitez avoir des icônes dynamiques, modifiez le champ méthode onChange pour mettre à jour l'état qui peut changer l'icône. Si vous vouliez faire ce nettoyeur, vous pouvez le mettre dans un composant et l'appeler IconTextField comme } ....autres attributs />

@bradrisse fonctionne très bien, Dieu merci, j'ai lu tout le fil, j'ai trouvé la réponse que je cherchais dans le dernier commentaire

Est-il possible d'ajouter comme accessoires?
_ flottantLabelText='Étiquette'
hintText='Texte de l'indice'
errorText={ ${<MoreVertIcon />} Error Text }
multiLigne
/>_

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

// champ de texte avec icône
const IconTextField = (accessoires) => (

icon="{"personne"}
hintText={props.label}
type={props.type ?
fullWidth={true}
/>

)

Je crois que cela peut être fermé, non? https://material-ui-next.com/demos/text-fields/#input -adornments

@stunaz Je ne pense pas que ce soit ce que les gens demandent ici.

@oliviertassinari Le seul autre type que je peux voir dans la spécification est "Icône signifiant":

Signifiant d'icône

Les icônes décrivent le type de saisie requis par un champ de texte. Ils sont affichés à gauche du champ de texte.

Il semble que cela puisse être réalisé avec seulement quelques lignes de code :

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

[...]

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

Un exemple dans la doc nous permettrait-il de clore ce problème ?

@mbrookes j'ai une idée. Étant donné que le champ de texte n'est pas le seul composant qui souhaite un décorateur d'icône, nous pouvons peut-être créer un wrapper qui ajoutera une icône à un élément.

Exemple

Pour le champ de texte

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

Pour le bouton

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

Avantage

Cette méthode ne cassera pas ou ne polluera pas l'API actuelle, il n'y aura donc pas de modifications importantes.

Préoccuper

Si ce IconDecorator doit être implémenté, doit-il être inclus dans cette bibliothèque ou dans une autre bibliothèque externe ?

@wongjiahau La seule difficulté que je vois avec cela est que l'alignement vertical est spécifique au composant, il devrait donc vérifier son type d'enfant et ajuster ses marges de manière appropriée, mais cela peut être réalisé.

Si cela devait aller de l'avant, il est logique qu'il fasse partie de MUI.

@oliviertassinari désolé de vous

Cela semble être toujours ouvert? A-t-il été expulsé ou cherche-t-il toujours à être résolu ?

@BlakeBurnette Ce problème concerne l'exposition d'un composant spécifique pour gérer ce problème. Je ne suis pas 💯 % convaincu que cela soit nécessaire étant donné les deux alternatives suivantes. Quelqu'un souhaite-t-il ajouter une démo à la documentation afin que nous puissions résoudre ce problème ?

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