物料UI自动完成芯片多行
物料UI自动完成芯片多行
提问于 2020-04-23 18:49:21
我正在使用材料UI自动完成组件，并希望有多行芯片。我正在使用芯片来显示一些文本，这些文本中最多可以有10个单词。我知道这不是芯片的初衷，但这通常非常适合我的UI，所以我想坚持使用它们。
也就是说，在移动设备上(例如iPhone 8)，一个有大约10个单词的芯片将显示类似于“前几个单词...”的内容，其中将有省略号而不是文本的其余部分。
我已经研究过使用renderTags属性(带有一个使用自动换行的芯片标签的排版元素)，并且已经尝试过了，但是没有取得任何进展。有没有人有什么建议/代码片段可以让它工作呢？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-04-24 07:36:35
我知道该怎么做了。以下是多行芯片工作(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"
/>
)}
/>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61385380
复制相关文章
相似问题
腾讯云开发者
