时间戳

首页 > 解决方案 > Material UI Autocomplete Chip 多线

javascript - Material UI Autocomplete Chip 多线

问题描述

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

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

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

标签： javascriptcssreactjsautocompletematerial-ui

解决方案

我想出了怎么做。这是多线芯片工作的示例代码（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"
    />
  )}
/>

推荐阅读