マテリアルUIチップ内に名前と電子メールを表示する方法は？

Question

私は、名前と電子メールを並べて表示するためにMaterial UIチップを使用しています。 しかし、名前が大きい電子メールがあるとき、これは私の関数である

チップ境界の外に出戻っチップ

getGuestList() { 
    let {guests} = this.state; 
    let guestChips = []; 
    let s = {overflow: 'hidden',width: '50%', display: 'inline-flex'} 
    guests.map((guest, i) => { 
     guestChips.push(
     <div key={i}> 
      <Chip 
      onRequestDelete={() => {this.removeGuest(i)}} 
      style={{marginTop: 10, width: '225%'}} 
      labelStyle={{width: '97%'}} 
      > 

      <div><div style={s}> 
      <div style={{textOverflow: 'ellipsis'}}> 
      {guest.name} 
      </div> 
      </div> | <div style={s}>{guest.email ? guest.email : ''}</div></div> 
      </Chip> 
     </div> 
    ) 
    }); 

これは、両方表示されますが、メールが小さければ、その幅はケースになるよう、50％に固定されています。電子メールの側面にスペースが残っていて、名前が電子メールの横に小さいスペースである場合。

これを克服する方法はありますか？

Answer 1

サンディープあなたの目的は、チップの内部の段落の長さのテキストを配置する場合、これは材料-UIのチップがどのようなGoogleの材料にもそのことについては意味されたものではありませんので、あなたはあなたのUIの再設計を検討すべきですスペックはそれを意図していました。誰が本当に最大の文字数（254）を持つ電子メールを持っていますか？

チップコンポーネントの機能に入ると、それらの画像に私が表示された奇妙な間隔がなくても、チップコンポーネントの機能が適切に機能します。しかし、それらは柔軟なアイテムではなく、したがって応答しません。 CSSの問題がまだ発生している場合は、実装したカスタムCSSが必要です。これは、提供された素材とUIが破られているものを無効にします。私はあなたのスタイルの問題を私のコードで経験しない方法を示すイメージを添付しました。カスタムCSSについて言えば、チップ全体に最大幅を設定し、テキストオーバーフロー：省略記号を使用するだけで、この問題全体を完全に回避することができます。解決していない

Answer 2

私はあなたのために、マテリアルUIサイトの例に基づいて完全にまとめました。特に "Example Array"の例です。 http://www.material-ui.com/#/components/chip。

あなたが探しているものについては、おそらく価値の名前を変更することを除いて、提供した以上のことをする必要はありません。

私はマテリアルUIの最新バージョンを使用しています。しかし、私があなたに提供したものは、多くのバージョンで変更されていません。それはあなたのために働くはずです。 React/ReactDOMの最新の互換バージョンも実行しています。これがうまくいかない場合は、16.0ディストリビューションへのアップグレードをまだお持ちでない場合は、アップグレードすることを検討してください。

import React from 'react'; 
import Chip from 'material-ui/Chip'; 
const outsideDataSource = [ 
    { 
     key: 1, 
     email: "Bob.Bobberson@gmail.com", 
     name: "Bob Bobberson" 
    }, 
    { 
     key: 2, 
     email: "Abigail@gmail.com", 
     name: "Abigail Person" 
    }, 
    { 
     key: 3, 
     email: "third.person@gmail.com", 
     name: "Third Person" 
    } 
] 

export default class EmailList extends React.Component { 
constructor(props) { 
    super(props); 

    this.state = { 
     guestList: outsideDataSource 
    } 
} 
handleRequestDelete = (key) => { 
    this.guestList = this.state.guestList; 
    const chipToDelete = this.guestList.map((chip) => chip.key).indexOf(key); 
    this.guestList.splice(chipToDelete, 1); 
    this.setState({guestList: this.guestList}); 
} 
renderGuestList(guest) { 
    return (
     <Chip 
      key={guest.key} 
      onRequestDelete={() => this.handleRequestDelete(guest.key)} 
      style={{display: 'inline-block', marginLeft: '10px', marginBottom: '10px'}} 
      labelStyle={{verticalAlign: 'top'}} 
     > 
      {guest.name}: {guest.email} 
     </Chip> 
    ) 
} 
render() { 
    const {guestList} = this.state 
    return (
     <div> 
      {guestList.map(this.renderGuestList, this)} 
     </div> 
    ); 
} 
}