javascript - Material UI Autocomplete Chip 多线

Question

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

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

我已经研究过使用 renderTags属性(使用文字换行作为芯片标签的 Typography 元素)并且已经尝试过，但没有使用它取得任何进展。有没有人有任何建议/代码片段让他们开始工作？

Answer 1

我想出了怎么做。这是多线芯片工作的示例代码(https://codesandbox.io/s/material-demo-eg6mb?file=/demo.tsx:332-1082)。允许这种多行功能起作用的关键特性是将芯片的高度设置为 100% 并使用带有 whitespace: normal 的标签的 Typography 元素:

<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"
    />
  )}
/>