diff --git a/src/components/popover/popover-menu.tsx b/src/components/popover/popover-menu.tsx index 046ee6df89..9def81e76f 100644 --- a/src/components/popover/popover-menu.tsx +++ b/src/components/popover/popover-menu.tsx @@ -88,6 +88,9 @@ export const PopoverMenu = forwardRef( {...props} className={classNames(classPrefix, props.className)} content={overlay} + bottomArrow={ + !!(props?.maxCount && props.actions.length > props?.maxCount) + } > {props.children} diff --git a/src/components/popover/popover.less b/src/components/popover/popover.less index 67bd4b9343..76f02c9b59 100644 --- a/src/components/popover/popover.less +++ b/src/components/popover/popover.less @@ -73,4 +73,17 @@ .adm-popover-arrow { color: var(--background); } + + &-bottom-arrow { + position: absolute; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + &::after { + content: ' '; + border: var(--arrow-size) solid transparent; + border-color: #fff transparent transparent transparent; + } + } } diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx index af6b66005d..dc6222b422 100644 --- a/src/components/popover/popover.tsx +++ b/src/components/popover/popover.tsx @@ -35,6 +35,7 @@ import { useClickAway, useIsomorphicLayoutEffect } from 'ahooks' import { DeprecatedPlacement, Placement } from './index' import { normalizePlacement } from './normalize-placement' import { convertPx } from '../../utils/convert-px' + const classPrefix = `adm-popover` export type PopoverProps = { @@ -49,6 +50,7 @@ export type PopoverProps = { placement?: Placement | DeprecatedPlacement stopPropagation?: PropagationEvent[] content: ReactNode + bottomArrow?: boolean } & NativeProps<'--z-index' | '--arrow-size'> export type PopoverRef = { @@ -107,6 +109,9 @@ export const Popover = forwardRef((p, ref) => {
{props.content}
+ {props.bottomArrow && ( +
+ )} ) )