Как отображать имя и адрес электронной почты внутри материнской платы UI?

Question

Я использую чип материального интерфейса для отображения имени и электронной почты бок о бок. Но когда имя большая электронная почта идет вне границы чипов

Это моя функция, возвращающая чипы

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

Sandeep, если ваша цель состоит, чтобы положить длину абзац текста внутри чипа, вы должны рассмотреть редизайн вашего UI, потому что это не то, что чипы Материально-Ui были предназначены для ни по этому вопросу, какой материал от Google спецификации предназначались для них. У кого действительно есть электронные письма с максимальным количеством символов (254)?

Попадая в функциональность компонента микросхемы, они делают правильный размер без этого странного расстояния, которое вы показали мне на этом изображении. Однако они не являются гибкими элементами и поэтому не реагируют. Если вы все еще испытываете проблемы css, у вас должен быть какой-то пользовательский css, который вы внедрили, который переопределяет то, что предоставил материальный ui, и это приводит к его разрыву. Я прикрепил изображение, показывающее, как я не испытываю проблемы с стилем с помощью моего кода. Говоря о пользовательском css, вы можете полностью избежать всей этой проблемы, просто установив максимальную ширину на своих фишках, а затем используйте text-overflow: ellipsis.

Answer 2

Я положил это вместе для вас полностью на примере одного материала-сайта 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> 
    ); 
} 
}