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

Sandeep，如果你的目的是将段落长度文本放在芯片内，你应该考虑重新设计你的用户界面，因为这不是什么材料-ui的筹码所针对的，也不是谷歌的材料规范所针对的。究竟谁拥有最大字符数（254）的电子邮件？

进入芯片组件的功能，它们可以正确调整尺寸，而不会在图像中显示我那种奇怪的间距。但是，它们不是弹性项目，因此没有响应。如果您仍然遇到css问题，那么您必须拥有一些已实现的自定义css，它将覆盖所提供的材料，并导致其中断。我附上了一张图片，显示我的代码中没有遇到样式问题。说到自定义css，只需在芯片上设置最大宽度然后使用文本溢出：省略号，就可以完全避免这个问题。

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

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

如何在材料UI芯片内显示名称和电子邮件？

4 个答案: