머티리얼 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의 칩에 대한도 그없이 구글의 자료에 대한 의미가 있었는지하지 않기 때문에

하기 Sandeep는, 당신은 당신의 UI의 재 설계를 고려해야한다 specs는 그것들을 의도했다. 누가 글자 수 (254)가 최대 인 이메일을 진짜로 갖고 있니?

칩 구성 요소의 기능에 들어가기 때문에, 그들은 그 이미지에서 저에게 보여준 이상한 간격없이 크기를 적절히 조절합니다. 그러나, 그들은 유연한 항목이 아니므로 응답하지 않습니다. CSS 문제가 여전히 발생하는 경우 구현 한 맞춤 CSS가 있어야합니다.이 CSS는 자료가 제공 한 요소를 무시하고 중단시켜야합니다. 내 코드에 스타일 문제가 발생하지 않았 음을 보여주는 이미지를 첨부했습니다. 커스텀 CSS에 대해 말하면, 칩 전체에 최대 너비를 설정하고 텍스트 오버 플로우 : 줄임표를 사용하여이 모든 문제를 완전히 피할 수 있습니다.

Answer 2

예제 1 material-ui의 사이트를 기반으로 완전히 정리해 놓았습니다. 특히 "예제 배열"예제. http://www.material-ui.com/#/components/chip.

당신이 찾고있는 것을 위해, 아마도 가치 이름을 변경하는 것을 제외하고는 그들이 제공 한 것 이상을 할 필요가 없습니다.

Material-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> 
    ); 
} 
}