Material UI 自动完成芯片多线

Question

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

也就是说，在移动设备（例如 iPhone 8）上，大约 10 个单词的芯片将显示类似“前几个单词...”的内容，其中将出现省略号而不是文本的其余部分。

我已经研究过使用该renderTags属性（使用自动换行作为芯片标签的 Typography 元素）并尝试过使用该属性，但没有取得任何进展。有没有人有任何建议/代码片段让他们工作？

Answer 1

我想出了怎么做。这是多线芯片工作的示例代码（https://codesandbox.io/s/material-demo-eg6mb?file=/demo.tsx:332-1082）。允许此多行功能工作的关键特性是将芯片的高度设置为 100% 并使用 Typography 元素作为标签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"
    />
  )}
/>