PrimeNG 芯片溢出行为 [英] PrimeNG Chips overflow behaviour

问题描述

当我有太多筹码"无法放入 <p-chips> 组件时，它开始水平拉伸组件，直到它脱离页面边缘.我希望它垂直扩展，然后换行到下一行(就像 Material UI 那样).

When I have too many 'chips' to fit in the <p-chips> component, it starts stretching the component horizontally until it goes off the edge of the page. I'd like it to expand vertically instead, and wrap to the next line (like material UI does).

似乎没有任何选项可以控制溢出行为，如果我将组件的样式设置得更小，我就看不到溢出的芯片:(

There doesn't seem to be any options to control overflow behaviour, and if I style the component to be smaller, I just can't see the chips that are overflowing :(

推荐答案

芯片令牌使用 flex 定位，因此一些自定义样式可以解决问题.很遗憾，这不是默认行为.

The chip tokens are positioned with flex so some custom styles will do the trick. Its a shame this isn't the default behaviour.

.p-chips-multiple-container {
  flex-wrap: wrap;
  align-content: space-between;
  padding-bottom: 0;
}

.p-chips-token, .p-chips-input-token {
  margin-bottom: 0.5rem;
}

从您安装的任何主题中获取边际值.

Take the margin value from whatever theme you have installed.

这篇关于PrimeNG 芯片溢出行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！