Material-ui: [टेक्स्टफिल्ड] टेक्स्ट फील्ड में आइकन प्रोप जोड़ें

जैसा कि #3032 द्वारा बताया गया है, यह ऐसा दिख सकता है

और #3038 हमें बाईं ओर और दाईं ओर एक आइकन जोड़ने में सक्षम होना चाहिए।

उपसर्ग और प्रत्यय देखना भी बहुत अच्छा होगा

मुझे कुछ ऐसा चाहिए। क्या आप इस पर काम कर रहे हैं?

इसे कब तक जारी किया जाएगा?

मुझे लगता है कि इसे स्वत: पूर्ण इनपुट तक भी बढ़ाया जाना चाहिए, यह बहुत उपयोगी होगा।

क्या टेक्स्टफिल्ड सत्यापन/त्रुटियों के साथ एक आइकन जोड़ने का कोई तरीका भी हो सकता है?

मुझे लगता है कि 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 , और इसे अधिकतम की एक सरणी देने के लिए संभावित समर्थन। 2 तत्व, जैसे TextField और/या SelectField , जैसा कि उस फ़ोन/कैलेंडर उदाहरण में दिखाया गया है।

यह विशेष रूप से मोबाइल पर बहुत सारी जगह बचा सकता है, और परेशानी, उन सभी को संरेखित करने के लिए सीएसएस को ठीक करने की आवश्यकता नहीं है।

ListItem के साथ नेस्टेड टेक्स्टफील्ड का उपयोग करने में समस्या यह है कि ... जब तक मुझे कुछ याद नहीं आ रहा है, तो आपके फॉर्म में अगले टेक्स्टफील्ड पर टैब करना असंभव हो जाता है।

अकेले इस कारण से एक स्टैंडअलोन होना बेहतर है जैसा कि @oliviertassinari द्वारा सुझाया गया है या बस एक अतिरिक्त प्रोप जिसे सेट किया जा सकता है , हालांकि बाद वाला #4027 से हतोत्साहित लगता है। क्या किसी को कामकाजी कामकाज मिला है?

क्या मूल मुद्दे को हल करने के लिए कोई प्रगति या अस्थायी समाधान है?

@iamzhouyi स्वत: पूर्ण अनुभव के लिए इस तरह कुछ उपयोग करने का प्रयास करें

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

कोई भी इस पर कोई प्रगति कर रहा है? अगर किसी ने शुरू किया है तो मुझे मदद करना अच्छा लगेगा, अगर नहीं तो मैं इसे खुद एक चक्कर लगाऊंगा?

यह @oshalygin जैसा नहीं दिखता है, ध्यान दें कि इसे # 6566 पर चेकलिस्ट में जोड़ा गया है, हालांकि हो सकता है कि वहां प्रगति को ट्रैक करना चाहें!

एक बढ़िया जोड़ होगा।

@oshalygin यदि आप इस पर गौर करने जा रहे हैं, तो मैं आपको next शाखा से बाहर काम करने का सुझाव दूंगा - हम master पर नई सुविधाओं को प्राथमिकता नहीं दे रहे हैं। इसके अलावा, क्योंकि यह कंपोज़ेबल घटकों से बना है, आपको इसे आसान बनाना चाहिए।

मुझे लगता है कि टेक्स्ट फ़ील्ड मान की रीयल टाइम जांच के लिए टेक्स्ट फ़ील्ड में सर्कुलर प्रगति करना भी बहुत अच्छा होगा।

वाह, मैं देख रहा हूँ कि यह 1.5 साल पहले खोला गया था! इसका कोई अपडेट? मैंने सीएसएस हैक्स (और सामग्री से पहले) जोड़ने की कोशिश की है कि किस तरह का काम है, लेकिन मुझे और अधिक बढ़िया नियंत्रण की आवश्यकता है, क्योंकि मुझे इसे और स्टाइल करने की ज़रूरत है, क्या यह गायब हो गया है या राज्य के आधार पर चला गया है, और अधिक विशेष रूप से, टेक्स्टफील्ड के अंदर हो . हिंटटेक्स्ट/प्लेसहोल्डर के साथ भी झुकाव की कोशिश की, लेकिन ये सभी एक दूसरे के साथ पूरी तरह से विरोधाभासी और अराजक हैं। मैं

टेक्स्ट फ़ील्ड से सटे आइकन को प्राप्त करने का सबसे आसान तरीका फ़ील्ड और आइकन को एक 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>

यदि आप इसे बाईं ओर चाहते हैं, तो बस फ़ील्ड में टेक्स्ट इंडेंट जोड़ें और स्थिति को बाईं ओर बदलें।

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

यदि आप डायनेमिक आइकन रखना चाहते हैं, तो उस स्थिति को अपडेट करने के लिए ऑन चेंज विधि को बदलें जो आइकन को बदल सकती है। यदि आप इस क्लीनर को बनाना चाहते हैं, तो आप इसे एक घटक में डाल सकते हैं और इसे IconTextField जैसे कह सकते हैं } ....अन्य विशेषताएँ />

@bradrisse बहुत अच्छा काम करता है, भगवान का शुक्र है कि मैंने पूरा धागा पढ़ा, मुझे वह जवाब मिला जो मैं आखिरी टिप्पणी में देख रहा था

क्या सहारा के रूप में जोड़ना संभव है?
_ फ्लोटिंग लेबल टेक्स्ट = 'लेबल'
हिंटटेक्स्ट = 'संकेत टेक्स्ट'
त्रुटि पाठ = { ${<MoreVertIcon />} Error Text }
बहु
/>_

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

// आइकन के साथ टेक्स्टफील्ड
const IconTextField = (प्रॉप्स) => (

आइकन = {"व्यक्ति"}
हिंटटेक्स्ट = {प्रोप्स.लेबल}
टाइप = {प्रोप्स टाइप?
फुलविड्थ = {सच}
/>

)

मेरा मानना ​​है कि इसे बंद किया जा सकता है, है ना? 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>

लाभ

यह विधि वर्तमान एपीआई को नहीं तोड़ेगी या प्रदूषित नहीं करेगी, इस प्रकार कोई ब्रेकिंग परिवर्तन नहीं होगा।

चिंता

यदि यह IconDecorator लागू किया जाना है, तो क्या इसे इस पुस्तकालय या किसी अन्य बाहरी पुस्तकालय में शामिल किया जाना चाहिए?

@wongjiahau एक कठिनाई जो मैं देख रहा हूं वह यह है कि लंबवत संरेखण घटक विशिष्ट है, इसलिए इसे अपने बच्चे के प्रकार की जांच करनी होगी और इसके मार्जिन को उचित रूप से समायोजित करना होगा, लेकिन इसे प्राप्त किया जा सकता है।

अगर इसे आगे बढ़ाना था, तो यह समझ में आता है कि यह एमयूआई का हिस्सा है।

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