Material UI 自动完成芯片多行

Question

我正在使用 Material UI 自动完成组件并且想要多行条码。我正在使用 chips 来显示一些文本，该文本中最多可以有大约 10 个单词。我知道这不是芯片的预期目的，但这通常非常适合我的 UI 所以我想坚持使用它们。

也就是说，在移动设备上（例如 iPhone 8），大约 10 个单词的纸条将显示类似 "The first few words..." 的内容，其中将使用省略号代替文本的其余部分。

我已经研究过使用 renderTags 属性（使用 Typography 元素使用 word-wrap 作为芯片标签）并尝试过但没有取得任何进展.有没有人有任何 advice/code 的代码片段可以使它正常工作？

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

Material UI 自动完成芯片多行

Material UI Autocomplete Chip multiline

javascript

css

autocomplete

reactjs

material-ui