#2416で参照されているように、現在、テキストフィールドコンポーネントに左アイコンを追加する方法はありません。 このためのPRに取り組みたいと思います。
TextFieldは<TextField icon={icon} />
ように呼び出され、入力の前にtextFieldの左側にアイコンをレンダリングします。
#3032で指摘されているように、次のようになります。
#3038左側と右側にアイコンを追加できるはずです。
また、接頭辞と接尾辞を見るのも素晴らしいでしょう
こんなものが欲しいのですが。 これに取り組んでいますか?
これがリリースされるまでどのくらいかかりますか?
これはオートコンプリート入力にも拡張する必要があると思います。非常に便利です。
TextFieldの検証/エラーを含むアイコンを追加する方法もありますか?
これは、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
であり、最大の配列を与える可能性のあるサポートです。 その電話/カレンダーの例に示されているように、 TextField
やSelectField
ような2つの要素。
これにより、特にモバイルで多くのスペースを節約でき、面倒な作業を行うことができます。CSSを適切に調整して、すべてを揃える必要はありません。
ListItemでネストされたテキストフィールドを使用する場合の問題は、何かが足りない場合を除いて、フォーム内の次のテキストフィールドにタブで移動できなくなることです。
この理由だけで、スタンドアロンを使用することが望ましいです
元の問題を解決するための進捗状況または一時的な解決策はありますか?
@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>
左側にしたい場合は、フィールドに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はうまく機能します。スレッド全体を読んで、最後のコメントで探していた答えを見つけてくれてありがとう。
小道具として追加することは可能ですか?
_
ヒントテキスト= 'ヒントテキスト'
errorText = { ${<MoreVertIcon />} Error Text
}
multiLine
/> _
import ActionHome from 'material-ui/svg-icons/action/home';
<TextField
floatingLabelText={<SvgIconComponent/>}
floatingLabelFixed={true}
/>
//アイコン付きのテキストフィールド
const IconTextField =(props)=>(
ヒントテキスト= {props.label}
type = {props.type?
fullWidth = {true}
/>
)。
これは閉じることができると思いますよね? https://material-ui-next.com/demos/text-fields/#input -adornments
@stunaz私はそれが人々がここで求めているものだとは思いません。
@oliviertassinari仕様で確認できる他のタイプは、「アイコンシニフィアン」のみです。
アイコン記号
アイコンは、テキストフィールドに必要な入力の種類を示します。 それらはテキストフィールドの左側に表示されます。
ほんの数行のコードで達成できるようです。
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つの選択肢を考えると必要だと確信していません。 この問題を解決できるように、ドキュメントにデモを追加したい人はいますか?
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);
最も参考になるコメント
テキストフィールドに隣接するアイコンを実現する最も簡単な方法は、絶対位置のアイコンを含むことができるdivでフィールドとアイコンをラップすることです。
左側にしたい場合は、フィールドにtextIndentを追加し、左側の位置を変更するだけです。
動的アイコンが必要な場合は、フィールドonChangeメソッドを変更して、アイコンを変更できる状態を更新します。 これをよりクリーンにしたい場合は、これをコンポーネントに入れて、IconTextFieldのように呼び出すことができます。 } ....その他の属性/>