Skip to content

Commit 3b02e0f

Browse files
cbbfcdbobihuangmiracles1919
authored
feat(Popover): support custom arrow size (#6072)
* feat: Support customizable arrow-size * feat: svg aspect ratio adapt * feat: use css variable insteadof getcomputedstyle * feat: update document * feat: keep original format style * doc: update arrow size default value * chore: update popover types --------- Co-authored-by: bobihuang <[email protected]> Co-authored-by: miracles1919 <[email protected]>
1 parent 1929463 commit 3b02e0f

File tree

4 files changed

+8
-6
lines changed

4 files changed

+8
-6
lines changed

src/components/popover/index.en.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ In order to maintain compatibility, we still support the use of the old version
4949
| Name | Description | Default | Global |
5050
| --- | --- | --- | --- |
5151
| --z-index | `z-index` of the popover element | `1030` | `--adm-popover-z-index` |
52+
| --arrow-size | the arrow size of the popover element | `8px` | - |
5253

5354
### Ref
5455

src/components/popover/index.zh.md

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,9 +46,10 @@
4646

4747
### CSS 变量
4848

49-
| 属性 | 说明 | 默认值 | 全局变量 |
50-
| --------- | ---------------- | ------ | ----------------------- |
51-
| --z-index | 元素的 `z-index` | `1030` | `--adm-popover-z-index` |
49+
| 属性 | 说明 | 默认值 | 全局变量 |
50+
| ------------ | ---------------- | ------ | ----------------------- |
51+
| --z-index | 元素的 `z-index` | `1030` | `--adm-popover-z-index` |
52+
| --arrow-size | 元素的箭头尺寸 | `8px` | - |
5253

5354
### Ref
5455

src/components/popover/popover.less

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@
6363
&-arrow-icon {
6464
display: block;
6565
height: var(--arrow-size);
66-
width: 15px;
66+
width: calc(var(--arrow-size) / 8 * 15);
6767
position: absolute;
6868
top: 50%;
6969
left: 50%;

src/components/popover/popover.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export type PopoverProps = {
4949
placement?: Placement | DeprecatedPlacement
5050
stopPropagation?: PropagationEvent[]
5151
content: React.ReactNode
52-
} & NativeProps<'--z-index'>
52+
} & NativeProps<'--z-index' | '--arrow-size'>
5353

5454
export type PopoverRef = {
5555
show: () => void
@@ -160,7 +160,7 @@ export const Popover = forwardRef<PopoverRef, PopoverProps>((p, ref) => {
160160
top: arrowY != null ? `${arrowY}px` : '',
161161
right: '',
162162
bottom: '',
163-
[arrowSide]: `-${convertPx(8)}px`,
163+
[arrowSide]: 'calc(var(--arrow-size) * -1)',
164164
})
165165
const arrowRotate = {
166166
top: '0deg',

0 commit comments

Comments
 (0)