Материал интерфейса автозаполнения Чип многострочный - PullRequest
Новая
       33

Материал интерфейса автозаполнения Чип многострочный

0 голосов
/ 23 апреля 2020

Я использую компонент автозаполнения пользовательского интерфейса и хотел бы иметь многострочные чипы. Я использую фишки для отображения некоторого текста, где в этом тексте может быть до 10 слов. Я знаю, что это не предназначение микросхем, но это обычно очень хорошо вписывается в мой интерфейс, поэтому я хотел бы придерживаться их.

Тем не менее, на мобильном телефоне (например, iPhone 8), В микросхеме из примерно 10 слов будет отображаться что-то вроде «Первые несколько слов ...», где вместо остатка текста будет многоточие.

Я рассмотрел использование свойства renderTags (с типографский элемент, использующий перенос слов в качестве метки чипа), и уже опробовали его, но не добились никакого прогресса в этом направлении. У кого-нибудь есть какие-либо советы / фрагменты кода, где они получили это работает?

1 Ответ

0 голосов
/ 24 апреля 2020

Я разобрался, как это сделать. Вот пример кода с работающими многострочными чипами (https://codesandbox.io/s/material-demo-eg6mb?file= / demo.tsx: 332-1082 ). Ключевыми функциями, обеспечивающими работу этой многострочной функции, является установка высоты чипа равной 100% и использование элемента «Типография» для метки с 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"
    />
  )}
/>
...