Material-ui: [TextField] إضافة رمز خاص إلى حقل النص

كما أشار # 3032 ، يمكن أن يبدو

و # 3038 يجب أن نكون قادرين على إضافة أيقونة على اليسار واليمين.

سيكون من الرائع أيضًا رؤية البادئة واللاحقة

أود شيء من هذا القبيل. هل تعمل على هذا؟

كم من الوقت سيستغرق قبل أن يتم إصدار هذا؟

أعتقد أن هذا يجب أن يمتد إلى إدخال الإكمال التلقائي أيضًا ، وسيكون مفيدًا جدًا.

هل يمكن أن تكون هناك طريقة لإضافة رمز مع عمليات التحقق من صحة / أخطاء TextField أيضًا؟

أعتقد أن هذا يجب أن ينطبق على جميع حقول "النموذج" ، بما في ذلك SelectField.

أنجز ذلك باستخدام TextField داخل ListItem أو MenuItem. ضع TextField داخل ListItem ثم استخدم دعائم leftIcon أو rightIcon لتحقيق ذلك.

أنجز ذلك باستخدام TextField داخل ListItem أو MenuItem.

أعتقد أن هذا هو النهج الصحيح. أفضل استخدام التركيب على المنطق الإضافي في TextField .
ومع ذلك ، أتساءل عما إذا كان ListItem أو MenuItem قد تم تصميمه مع وضع حالة الاستخدام هذه في الاعتبار.
أعتقد أنه يمكن أن يكون لدينا مكون أكثر تحديدًا للقيام بذلك. مثل <TextFieldIcon />

أعتقد أن الأفضل هو أن يكون في شكل يشبه ListItem كما هو موضح هنا: https://material.google.com/components/text-fields.html#text -fields-single-line- حقل النص

وربما يكون خيارًا مشابهًا لخيار rightCheckbox ، ولكن بعد ذلك rightField ، ودعم محتمل يمنحه مصفوفة بحد أقصى. عنصران ، مثل TextField و / أو SelectField ، كما هو موضح في مثال الهاتف / التقويم.

يمكن أن يوفر هذا مساحة كبيرة خاصة على الهاتف المحمول ، والمتاعب ، ولا تحتاج إلى تعديل css بشكل صحيح لمحاذاة كل منهم.

تكمن المشكلة في استخدام Textfield المتداخلة مع ListItem في أنه ... ما لم أفقد شيئًا ما ، يصبح من المستحيل الانتقال إلى Textfield التالي في النموذج الخاص بك.

لهذا السبب وحده من الأفضل أن يكون لديك قائمة بذاتها كما هو مقترح بواسطة oliviertassinari أو ببساطة دعامة إضافية يمكن ضبطها ، على الرغم من أن هذا الأخير يبدو محبطًا بسبب # 4027. هل وجد أي شخص حلاً عملياً؟

هل هناك تقدم أو حل مؤقت لحل المشكلة الأصلية؟

iamzhouyi حاول استخدام شيء مثل هذا لتجربة الإكمال التلقائي

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

أي شخص لديه أي تقدم في هذا؟ إذا كان أي شخص قد بدأ ، فأنا أحب المساعدة ، وإذا لم يكن الأمر كذلك ، فسأجربها بنفسي؟

لا يبدو أنه oshalygin ، لاحظ أنه تمت إضافته إلى قائمة التحقق في # 6566 على الرغم من أنه قد ترغب في تتبع التقدم هناك!

ستكون إضافة رائعة.

oshalygin إذا كنت ستنظر في هذا الأمر ، أقترح العمل على فرع next - نحن لا نعطي الأولوية للميزات الجديدة على master . أيضًا ، نظرًا لأنه مصنوع من مكونات قابلة للتركيب ، يجب أن تجده أسهل.

أعتقد أنه سيكون من الرائع أيضًا أن يكون هناك تقدم دائري في الحقول النصية للتحقق في الوقت الفعلي من قيمة حقل النص.

واو ، أرى أن هذا تم افتتاحه منذ 1.5 عام! أي تحديث لهذا؟ لقد حاولت إضافة اختراقات CSS (& قبل المحتوى) أي نوع من العمل ، لكنني بحاجة إلى مزيد من التحكم الدقيق ، حيث أحتاج إلى تصميمه بشكل أكبر ، وجعله يختفي أو يختفي اعتمادًا على الحالة ، وبشكل أكثر تحديدًا ، كن داخل حقل النص . تمت محاولة العبث مع العنصر النائب / HintText ، ولكن كل هذه الأشياء متضاربة تمامًا وفوضوية مع بعضها البعض. 😞

أسهل طريقة لتحقيق الرمز المجاور لحقل النص هي لف الحقل والأيقونة في عنصر 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 يعمل بشكل رائع ، والحمد لله أنني قرأت الموضوع بالكامل ، ووجدت الإجابة التي كنت أبحث عنها في التعليق الأخير

هل من الممكن إضافة الدعائم؟
_ floatingLabelText = 'تسمية'
hintText = 'نص تلميح'
errorText = { ${<MoreVertIcon />} Error Text }
متعدد الخطوط
/> _

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

// textfield مع الرمز
const IconTextField = (الدعائم) => (

رمز = {"شخص"}
hintText = {props.label}
اكتب = {props.type؟
fullWidth = {صحيح}
/>

)

أعتقد أنه يمكن إغلاق هذا ، أليس كذلك؟ https://material-ui-next.com/demos/text-fields/#input -adornments

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>

هل سيسمح لنا مثال في المستندات بإغلاق هذه المشكلة؟

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 تتمثل إحدى الصعوبات التي أراها في ذلك في أن المحاذاة الرأسية خاصة بالمكون ، لذلك سيتعين عليها التحقق من نوعها

إذا استمر هذا الأمر ، فمن المنطقي أن تكون جزءًا من 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);