材料UI自动完成芯片多行。

Question

我正在使用Material UI Autocomplete组件，并希望拥有多行芯片。我正在使用芯片来显示一些文本，这些文本中最多可以有10个字。我知道这不是芯片的预期目的，但一般来说，这很适合我的用户界面，所以我想坚持使用它们。

也就是说，在手机上（比如iPhone 8），一个有10个字的芯片会显示类似 "前几个字...... "的内容，其中会有省略号，而不是文本的剩余部分。

我曾研究过使用 renderTags 属性(使用一个使用word-wrap的芯片标签的Typography元素)，并且已经尝试过了，但还没有取得任何进展。有没有人有任何建议代码片段可以让这个功能发挥作用？

Answer 1

我知道怎么做了。这里是多行芯片工作的例子代码 (https:/codesandbox.iosmaterial-demo-eg6mb?file=demo.tsx:332-1082。). 允许这种多行功能工作的关键特征是将芯片的高度设置为100%，并在标签上使用一个带有 whitespace: normal:

<Autocomplete
  multiple
  id="fixed-tags-demo"
  options={top100Films}
  getOptionLabel={option => option.title}
  defaultValue={[top100Films[6], top100Films[13], top100Films[0]]}
  renderTags={(value, getTagProps) =>
    value.map((option, index) => (
      <Chip
        label={<Typography style={{whiteSpace: 'normal'}}>{option.title}</Typography>}
        {...getTagProps({ index })}
        disabled={index === 0}
        style={{height:"100%"}}
      />
    ))
  }
  style={{ width: 300 }}
  renderInput={params => (
    <TextField
      {...params}
      label="Fixed tag"
      variant="outlined"
      placeholder="Favorites"
    />
  )}
/>