如何在 material 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%，因此如果电子邮件较小，则 space 保留在电子邮件的一侧，如果名称较小，则 space 保留在电子邮件的一侧电子邮件的一侧。

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

Answer 1

我完全根据示例 1 material-ui 的站点为您整理了这些内容。特别是 "Example Array" 示例。 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>
    );
}
}

Answer 2

Sandeep，如果您打算将段落长度的文本放入纸片中，您应该考虑重新设计 UI，因为这不是 material-ui' s 芯片既不是为了 google 的 material 规格所设计的。谁真的拥有最大字符数 (254) 的电子邮件？？

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

Answer 3

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

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

Answer 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);

如何在 material UI 芯片中显示姓名和电子邮件？

How to display name and email inside material UI chip?

html

css

reactjs

material-ui