Material-ui: [TextField] Symbolprop zum Textfeld hinzufügen

Wie in #3032 gezeigt, könnte es so aussehen

und #3038 sollten wir links und rechts ein Symbol hinzufügen können.

wäre auch toll, Präfix und Suffix zu sehen

Ich hätte gerne so etwas. Arbeitest du daran?

Wie lange wird es dauern, bis das veröffentlicht wird?

Ich denke, dies sollte auch auf die Autocomplete-Eingabe erweitert werden, wäre sehr nützlich.

Könnte es auch eine Möglichkeit geben, ein Symbol mit TextField-Validierungen/-Fehlern hinzuzufügen?

Ich denke, das sollte für alle "Formular"-Felder gelten, einschließlich SelectField.

Ich erreiche das mit TextField in ListItem oder MenuItem. Fügen Sie ein TextField in ListItem ein und verwenden Sie dann leftIcon- oder rightIcon-Requisiten, um dies zu erreichen.

Ich erreiche das mit TextField in ListItem oder MenuItem.

Ich denke, das ist der richtige Ansatz. Ich würde in TextField lieber Komposition als zusätzliche Logik verwenden.
Ich frage mich jedoch, ob ListItem oder MenuItem für diesen Anwendungsfall entwickelt wurden.
Ich denke, dass wir dafür eine spezifischere Komponente haben könnten. Wie ein <TextFieldIcon />

Ich denke, das Beste wäre, es in einem ListItem wie hier gezeigt: https://material.google.com/components/text-fields.html#text -fields-single-line- Textfeld

Und vielleicht haben Sie es als eine ähnliche Option wie rightCheckbox , aber dann rightField , und mögliche Unterstützung, die ihm ein Array von max. 2 Elemente, wie TextField und/oder SelectField , wie in diesem Telefon-/Kalenderbeispiel gezeigt.

Dies könnte insbesondere auf Mobilgeräten viel Platz und Ärger sparen, da Sie das CSS nicht genau richtig anpassen müssen, damit sie alle aufeinander abgestimmt sind.

Das Problem bei der Verwendung eines mit ListItem verschachtelten Textfelds besteht darin, dass es unmöglich wird, zum nächsten Textfeld in Ihrem Formular zu wechseln, es sei denn, ich vermisse etwas.

Allein aus diesem Grund ist es vorzuziehen, einen Standalone zu haben wie von @oliviertassinari vorgeschlagen oder einfach eine zusätzliche Requisite, die eingestellt werden kann , obwohl letzteres von #4027 entmutigt zu sein scheint. Hat jemand einen funktionierenden Workaround gefunden?

Gibt es Fortschritte oder eine vorübergehende Lösung, um das ursprüngliche Problem zu lösen?

@iamzhouyi versuche, so etwas für die automatische Vervollständigung zu verwenden

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

Hat jemand diesbezüglich Fortschritte? Wenn jemand angefangen hat, würde ich gerne helfen, wenn nicht, würde ich es selbst versuchen?

Sieht nicht danach aus @oshalygin , beachten Sie, dass es der Checkliste auf #6566 hinzugefügt wurde, aber vielleicht möchten Sie dort den Fortschritt verfolgen!

Wäre eine tolle Ergänzung.

@oshalygin Wenn Sie sich damit next - wir priorisieren neue Funktionen nicht auf master . Da es aus zusammensetzbaren Komponenten besteht, sollten Sie es auch einfacher finden.

Ich denke auch, dass es großartig wäre, einen zirkulären Fortschritt in Textfeldern zu haben, um den Textfeldwert in Echtzeit zu überprüfen.

Wow, ich sehe, das wurde vor 1,5 Jahren eröffnet! Irgendein Update dazu? Ich habe versucht, CSS-Hacks (&vor Inhalt) hinzuzufügen, was funktioniert, aber ich brauche eine feinkörnigere Kontrolle, da ich es weiter stylen, es je nach Zustand verschwinden oder verschwinden lassen muss, und genauer gesagt, innerhalb des Textfelds sein muss . Habe es auch mit dem HintText/Platzhalter versucht, aber all dies ist völlig widersprüchlich und chaotisch. 😞

Der einfachste Weg, um das Symbol neben dem Textfeld zu erhalten, besteht darin, das Feld und das Symbol in ein div einzuschließen, das das absolut positionierte Symbol enthalten kann.

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

Wenn Sie es links haben möchten, fügen Sie einfach einen textIndent zum Feld hinzu und ändern Sie die Positionierung nach links.

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

Wenn Sie dynamische Symbole haben möchten, ändern Sie das Feld onChange-Methode, um den Status zu aktualisieren, der das Symbol ändern kann. Wenn Sie dies sauberer machen möchten, können Sie dies in eine Komponente einfügen und es wie IconTextField nennen } ....andere Attribute />

@bradrisse funktioniert

Ist es möglich, als Requisiten hinzuzufügen?
_ FloatingLabelText='Label'
hintText='Hinweistext'
errorText={ ${<MoreVertIcon />} Error Text }
multiLine
/>_

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

// Textfeld mit Symbol
const IconTextField = (props) => (

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

)

Ich glaube, das kann geschlossen werden, oder? https://material-ui-next.com/demos/text-fields/#input -schmuck

@stunaz Ich glaube nicht, dass die Leute hier danach fragen.

@oliviertassinari Der einzige andere Typ, den ich in der Spezifikation sehen kann, ist "Icon Signifier":

Symbolbezeichner

Symbole beschreiben die Art der Eingabe, die ein Textfeld erfordert. Sie werden links neben dem Textfeld angezeigt.

Es scheint, dass dies mit nur wenigen Codezeilen erreicht werden kann:

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

[...]

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

Würde ein Beispiel in den Dokumenten es uns ermöglichen, dieses Problem zu schließen?

@mbrookes Ich habe eine Idee. Da das Textfeld nicht die einzige Komponente ist, die einen Symbol-Dekorator benötigt, können wir vielleicht einen Wrapper erstellen, der ein Symbol an ein Element anhängt.

Beispiel

Für Textfeld

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

Für Knopf

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

Vorteil

Diese Methode wird die aktuelle API nicht beschädigen oder verschmutzen, daher gibt es keine Breaking Changes.

Anliegen

Wenn dieses IconDecorator implementiert werden soll, soll es in diese Bibliothek oder eine andere externe Bibliothek aufgenommen werden?

@wongjiahau Die einzige Schwierigkeit, die ich dabei sehe, besteht darin, dass die vertikale Ausrichtung komponentenspezifisch ist, sodass der untergeordnete Typ überprüft und die Ränder entsprechend angepasst werden müssen, aber das kann erreicht werden.

Wenn dies geschehen soll, ist es sinnvoll, Teil von MUI zu sein.

@oliviertassinari tut anzurufen , aber dies erfordert Ihre Einsicht und Erfahrung.

Das scheint noch offen zu sein? Wurde es gekickt oder ist es immer noch auf der Suche nach einer Lösung?

@BlakeBurnette Bei diesem Problem geht es darum, eine bestimmte Komponente für die Behandlung dieses

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