Material UI Autocomplete Chip 多行

Question

我正在使用 Material UI Autocomplete 組件並且想要多行芯片。 我正在使用 chips 來顯示一些文本，該文本中最多可以包含 10 個單詞。 我知道這不是芯片的預期目的，但這通常非常適合我的用戶界面，所以我想堅持使用它們。

也就是說，在移動設備（例如 iPhone 8）上，大約 10 個單詞的條塊將顯示類似“前幾個單詞...”的內容，其中將有省略號而不是文本的其余部分。

我已經研究過使用renderTags屬性（使用 Typography 元素對芯片標簽使用自動換行）並嘗試過，但使用它沒有取得任何進展。 有沒有人有任何建議/代碼片段可以使它正常工作？

Answer 1

我想出了怎么做。 這是多行芯片工作的示例代碼 ( https://codesandbox.io/s/material-demo-eg6mb?file=/demo.tsx:332-1082 )。 允許此多行功能起作用的關鍵特性是將芯片的高度設置為 100%，並為 label 使用帶有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"
    />
  )}
/>