如何在材质 UI 芯片中显示姓名和电子邮件？答案

【问题标题】：How to display name and email inside material UI chip?如何在材质 UI 芯片中显示姓名和电子邮件？
【发布时间】：2016-12-08 18:34:08
【问题描述】：

我正在使用 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%，因此如果电子邮件较小，则电子邮件侧面会保留空间，如果名称较小，则电子邮件侧面会保留空间。

有没有办法克服这个问题？

【问题讨论】：

标签： html css reactjs material-ui

【解决方案1】：

Sandeep，如果您的意图是将段落长度文本放入芯片中，您应该考虑重新设计您的 UI，因为这不是 material-ui 芯片的用途，也不是谷歌的材料规范的用途.谁真的拥有最多字符数（254）的电子邮件？

进入芯片组件的功能后，它们的尺寸确实合适，没有您在该图像中向我展示的那种奇怪的间距。但是，它们不是弹性项目，因此没有响应。如果您仍然遇到 css 问题，那么您必须有一些您已经实现的自定义 css 覆盖了 material-ui 提供的内容并导致它中断。我附上了一张图片，显示我的代码没有遇到您的样式问题。说到自定义 CSS，您可以完全避免整个问题，只需在芯片上设置最大宽度，然后使用 text-overflow: ellipsis。

【讨论】：

完全在船上，不适合使用材料 ui 芯片，但需要它所以仍在尝试，感谢你所做的一切

【解决方案2】：

我完全根据示例 one 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>
    );
}
}

【讨论】：

问题未解决 - imgur.com/a/9hAHP - 如果名称很长，您可以看到解决方案的另一面，它就在窗口外面，在我的解决方案中，名称和电子邮件的两侧都有空间, 如果长度很小...想根据日期窗口之前的姓名和电子邮件的大小来减小芯片的大小

【解决方案3】：

尝试这种方式，但用你的方式改变价值

 <Chip     
  label={user['user.firstname'] + ' ' + user['user.lastname']}
 >

【讨论】：

【解决方案4】：

如果允许使用自定义组件，可以尝试以下代替Chip

import { withStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import React from 'react';

const styles = theme => ({
  root: {
    margin: '4px',
    backgroundColor: '#e0e0e0',
    display: 'inline-flex',
    boxSizing: 'border-box',
    borderRadius: '16px',
  },
  label: {
      padding: 10,
      margin: 0,
  }  
});

class MultiLineChip extends React.Component {
  render() {
    const { classes } = this.props;

    return (
      <div className={classes.root}>
          <Typography variant="body2" gutterBottom className={classes.label}>
            {this.props.label || ''}
        </Typography>
      </div>
    );
  }
}

export default withStyles(styles)(MultiLineChip);

【讨论】：