ant-design/ant-design
在 GitHub 查看Avatar groups should only display the n overflow element when n>1, otherwise use the space to display the final item
Open
#31,233 创建于 2021年7月1日
Inactivehelp wanted
描述
- [X ] I have searched the issues of this repository and believe that this is not a duplicate.
What problem does this feature solve?
Avatar groups should only display the n overflow element when n>1, otherwise use the space to display the final item. The current behavior is to display a number of item specified by maxCount, plus an additional item with the n value when the number of children exceeds max count.
What does the proposed API look like?
Not sure how to express this idea concisely in the prop name, but backwards compatibility could be maintained by adding a boolean prop to determine whether to follow a new pattern in which the final item is either put in the max position if it is the last item, or that position is used to display the count of remaining items
Current behavior is like
maxCount = 3
(A)
(A)(B)
(A)(B)(C)
(A)(B)(C)( 1) <-- Note that we're not only displaying more than the user has asked for, and the last position is used inefficiently.
(A)(B)(C)( 2)
...
Proposed behavior with overFlowInFinal === true:
maxCount = 3
(A)
(A)(B)
(A)(B)(C) <-- We limit the total number of elements to the maxCount and correctly display the final item in slot 3
(A)(B)( 2)
...
Props would look like this:
export interface GroupProps {
className?: string;
children?: React.ReactNode;
style?: React.CSSProperties;
prefixCls?: string;
maxCount?: number;
overflowInFinal?: boolean; // <-- Add this prop
maxStyle?: React.CSSProperties;
maxPopoverPlacement?: 'top' | 'bottom';
/*
* Size of avatar, options: `large`, `small`, `default`
* or a custom number size
* */
size?: AvatarSize;
}