Material-ui: [TextField]テキストフィールドにアイコンプロップを追加

作成日 2016年01月14日  ·  30コメント  ·  ソース: mui-org/material-ui

#2416で参照されているように、現在、テキストフィールドコンポーネントに左アイコンを追加する方法はありません。 このためのPRに取り組みたいと思います。

TextFieldは<TextField icon={icon} />ように呼び出され、入力の前にtextFieldの左側にアイコンをレンダリングします。

TextField enhancement good first issue

最も参考になるコメント

テキストフィールドに隣接するアイコンを実現する最も簡単な方法は、絶対位置のアイコンを含むことができる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>

search-bar-with-icon

左側にしたい場合は、フィールドに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>

search-bar-with-left-icon

動的アイコンが必要な場合は、フィールドonChangeメソッドを変更して、アイコンを変更できる状態を更新します。 これをよりクリーンにしたい場合は、これをコンポーネントに入れて、IconTextFieldのように呼び出すことができます。 } ....その他の属性/>

全てのコメント30件

#3032で指摘されているように、次のようになります。
screen shot 2016-01-24 at 12 55 58 pm
#3038左側と右側にアイコンを追加できるはずです。

また、接頭辞と接尾辞を見るのも素晴らしいでしょう
image

こんなものが欲しいのですが。 これに取り組んでいますか?

これがリリースされるまでどのくらいかかりますか?

これはオートコンプリート入力にも拡張する必要があると思います。非常に便利です。

TextFieldの検証/エラーを含むアイコンを追加する方法もありますか?
screen shot 2016-07-05 at 1 19 31 pm

slice 1

これは、SelectFieldを含むすべての「フォーム」フィールドに当てはまるはずだと思います。

ListItemまたはMenuItem内のTextFieldを使用してこれを実現します。 ListItem内にTextFieldを配置し、leftIconまたはrightIconプロップを使用してそれを実現します。

ListItemまたはMenuItem内のTextFieldを使用してこれを実現します。

それが正しいアプローチだと思います。 TextField追加ロジックよりも合成を使用したいと思います。
ただし、 ListItemまたはMenuItemは、このユースケースを念頭に置いて設計されているのでしょうか。
それを行うために、より指定されたコンポーネントを持つことができると思います。 <TextFieldIcon />

ここに示すようなListItemように表示するのが最善だと思います: https ://material.google.com/components/text-fields.html#text -fields-single-line-テキストフィールド

そして、おそらくrightCheckboxと同様のオプションとしてそれを持っていますが、それからrightFieldであり、最大の配列を与える可能性のあるサポートです。 その電話/カレンダーの例に示されているように、 TextFieldSelectFieldような2つの要素。

これにより、特にモバイルで多くのスペースを節約でき、面倒な作業を行うことができます。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ハック(およびコンテンツの前)を追加しようとしましたが、状態に応じてさらにスタイルを設定したり、非表示にしたり、削除したりする必要があるため、よりきめ細かい制御が必要です。具体的には、テキストフィールド内に配置する必要

テキストフィールドに隣接するアイコンを実現する最も簡単な方法は、絶対位置のアイコンを含むことができる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>

search-bar-with-icon

左側にしたい場合は、フィールドに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>

search-bar-with-left-icon

動的アイコンが必要な場合は、フィールドonChangeメソッドを変更して、アイコンを変更できる状態を更新します。 これをよりクリーンにしたい場合は、これをコンポーネントに入れて、IconTextFieldのように呼び出すことができます。 } ....その他の属性/>

@bradrisseはうまく機能します。スレッド全体を読んで、最後のコメントで探していた答えを見つけてくれてありがとう。

小道具として追加することは可能ですか?
_ floatLabelText = 'ラベル'
ヒントテキスト= 'ヒントテキスト'
errorText = { ${<MoreVertIcon />} Error Text }
multiLine
/> _

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

//アイコン付きのテキストフィールド
const IconTextField =(props)=>(

icon = {"person"}
ヒントテキスト= {props.label}
type = {props.type?
fullWidth = {true}
/>

)。

これは閉じることができると思いますよね? https://material-ui-next.com/demos/text-fields/#input -adornments

@stunaz私はそれが人々がここで求めているものだとは思いません。

@oliviertassinari仕様で確認できる他のタイプは、「アイコンシニフィアン」のみです。

アイコン記号

アイコンは、テキストフィールドに必要な入力の種類を示します。 それらはテキストフィールドの左側に表示されます。

ほんの数行のコードで達成できるようです。

image

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この問題は、この問題のケースを処理するための特定のコンポーネントを公開することに関するものです。 私は💯%次の2つの選択肢を考えると必要だと確信していません。 この問題を解決できるように、ドキュメントにデモを追加したい人はいますか?

capture d ecran 2018-03-27 a 21 02 12
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);
このページは役に立ちましたか?
0 / 5 - 0 評価