材料UI自动完成芯片多行。

我正在使用Material UI Autocomplete组件,并希望拥有多行芯片。我正在使用芯片来显示一些文本,这些文本中最多可以有10个字。我知道这不是芯片的预期目的,但一般来说,这很适合我的用户界面,所以我想坚持使用它们。

也就是说,在手机上(比如iPhone 8),一个有10个字的芯片会显示类似 “前几个字…… “的内容,其中会有省略号,而不是文本的剩余部分。

我曾研究过使用 renderTags 属性(使用一个使用word-wrap的芯片标签的Typography元素),并且已经尝试过了,但还没有取得任何进展。有没有人有任何建议代码片段可以让这个功能发挥作用?

解决方案:

我知道怎么做了。这里是多行芯片工作的例子代码 (https:/codesandbox.iosmaterial-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"
    />
  )}
/>

给TA打赏
共{{data.count}}人
人已打赏
未分类

pandas group_by dataframe在写入excel时,只输出聚合列;如何在excel上获得整个输出?

2022-9-8 11:33:21

未分类

当保存字段标记为updatable=false的实体时,禁用警告 "实体已被修改,但不会更新,因为属性是不可改变的"。

2022-9-8 11:33:23

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索