Material-ui: [TextField] 텍스트 필드에 아이콘 소품 추가

#3032에서 지적한 것처럼 다음과 같이 보일 수 있습니다.

그리고 #3038 왼쪽과 오른쪽에 아이콘을 추가할 수 있어야 합니다.

접두사와 접미사를 보는 것도 좋을 것입니다.

나는 이것과 같은 것을 원한다. 이 작업을 하고 있습니까?

이게 출시되려면 얼마나 걸릴까요?

나는 이것이 자동 완성 입력으로도 확장되어야 한다고 생각하는데 매우 유용할 것입니다.

TextField 유효성 검사/오류와 함께 아이콘을 추가하는 방법도 있습니까?

SelectField를 포함한 모든 "양식" 필드에 적용되어야 한다고 생각합니다.

ListItem 또는 MenuItem 내에서 TextField를 사용하여 이를 수행합니다. ListItem 안에 TextField를 넣은 다음 leftIcon 또는 rightIcon 소품을 사용하여 이를 달성합니다.

ListItem 또는 MenuItem 내에서 TextField를 사용하여 이를 수행합니다.

올바른 접근이라고 생각합니다. 차라리 TextField 추가 논리보다 합성을 사용하고 싶습니다.
그러나 ListItem 또는 MenuItem 가 이 사용 사례를 염두에 두고 설계되었는지 궁금합니다.
나는 우리가 그것을 하기 위해 더 구체적인 구성 요소를 가질 수 있다고 생각합니다. <TextFieldIcon /> 처럼

https://material.google.com/components/text-fields.html#text -fields-single-line-에 표시된 것처럼 ListItem 처럼 보이는 것이 가장 좋습니다. 텍스트 필드

그리고 아마도 rightCheckbox 와 비슷한 옵션으로 가질 수 있지만 rightField 와 최대 배열을 제공하는 가능한 지원입니다. TextField 및/또는 SelectField 와 같은 2개의 요소(예 TextField 전화/캘린더 예시).

이렇게 하면 특히 모바일에서 많은 공간을 절약할 수 있고 모든 것을 정렬하기 위해 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 해킹(&before content)을 추가하려고 시도했지만 스타일을 추가로 지정하고 상태에 따라 사라지거나 사라지게 하고 더 구체적으로 텍스트 필드 안에 있어야 하므로 보다 세밀한 제어가 필요합니다. . 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='레이블'
힌트텍스트='힌트텍스트'
errorText={ ${<MoreVertIcon />} Error Text }
여러 줄
/>_

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

// 아이콘이 있는 텍스트 필드
const IconTextField = (소품) => (

icon={"사람"}
힌트텍스트={소품.라벨}
유형={소품.유형 ?
전체 너비={true}
/>

)

나는 이것이 닫힐 수 있다고 생각합니다. 맞습니까? https://material-ui-next.com/demos/text-fields/#input - 장식

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

문서의 예를 통해 이 문제를 종료할 수 있습니까?

@mbrooks 아이디어가 있습니다. 텍스트 필드가 아이콘 데코레이터를 원하는 유일한 구성 요소가 아니기 때문에 요소에 아이콘을 추가하는 래퍼를 만들 수 있습니다.

예시

텍스트 필드의 경우

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