Question

我正在使用Material UI自动完成组件，并且希望使用多行芯片。我正在使用筹码显示一些文本，该文本中最多可以包含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"
    />
  )}
/>

物料UI自动完成芯片多行

1 个答案: