Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

为Tooltip和Popover组件增加offsetSpacing属性 #61

Merged
merged 3 commits into from
Dec 13, 2024
Merged

为Tooltip和Popover组件增加offsetSpacing属性 #61

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cc87607
feat: Add the offsetSpacing property to the Tooltip and Popover compo…
xiexiejie Dec 10, 2024
a8526dc
feat: Optimize the height issue of the Tooltip component.
xiexiejie Dec 11, 2024
2208687
fix: Tooltip and Popover Fixing centering calculation issues
xiexiejie Dec 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/bui-core/src/Popover/Popover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ const Popover = React.forwardRef<HTMLDivElement, PopoverProps>((props, ref) => {
title,
content,
defaultOpen,
offsetSpacing = 0,
placement = 'top',
trigger = 'click',
onOpenChange,
Expand Down Expand Up @@ -86,6 +87,7 @@ const Popover = React.forwardRef<HTMLDivElement, PopoverProps>((props, ref) => {
childrenRef,
arrowDirection,
arrowLocation,
offsetSpacing,
selector: `[data-id="tt_${ttId}"]`,
});
if (!result) return;
Expand Down
4 changes: 4 additions & 0 deletions packages/bui-core/src/Popover/Popover.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,10 @@ export type PopoverProps<
* @default false
*/
hideArrow?: boolean;
/**
* 用于控制浮层和目标元素偏移量
*/
offsetSpacing?: number;
/**
* 气泡框位置
* @default 'top'
Expand Down
46 changes: 34 additions & 12 deletions packages/bui-core/src/Popover/index.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,11 @@ import React from 'react';

export default () => {
return (
<Popover title="This is a title" content="This is a content">
<Popover
title="This is a title"
content="This is a content"
placement="topLeft"
>
<span>click显示</span>
</Popover>
);
Expand Down Expand Up @@ -61,6 +65,23 @@ export default () => {
};
```

### OffsetSpacing is the interval between the floating layer and the target element

OffsetSpacing can be set to control the distance from the target element

```tsx
import { Popover } from '@bifrostui/react';
import React from 'react';

export default () => {
return (
<Popover title="This is a popover" offsetSpacing={20} defaultOpen>
<span>offsetSpacing控制目标间隔（设置20 以便观察）</span>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

是不是这里也翻译成英文

</Popover>
);
};
```

### HideArrow arrow display

You can set 'hideArrow' to true to hide arrows
Expand All @@ -80,7 +101,7 @@ export default () => {

### Placement Bubble Box Position

Placement: Set the position of the bubble float layer. The optional values are: top, left, right, bottom, topLeft, topRight, bottomLeft, bottomRight, leftTop, leftBottom, rightTop, rightBottom
Placement: Set the position of the bubble float layer. The optional values are: top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom

```tsx
import { Popover, Button } from '@bifrostui/react';
Expand Down Expand Up @@ -232,16 +253,17 @@ export default () => {

### API

| attribute | explain | type | Default value |
| ------------ | -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| title | Title of Bubble Floating Layer Floating Layer Content | ReactNode | - |
| content | Content of Bubble Floating Layer | ReactNode | - |
| defaultOpen | Whether to hide by default | boolean | false |
| open | Used for manually controlling the appearance and concealment of bubble floating layers | boolean | - |
| hideArrow | Display arrows or not | boolean | false |
| placement | Bubble box position | String, the enumeration value is `center` `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` `bottom` | 'top' |
| trigger | Trigger behavior | string \|String [], the enumeration value is' click '\|'hover' | 'click' |
| onOpenChange | The callback method for bubble floating layer manifestation and concealment | (e: React.MouseEvent<HTMLDivElement\>,data: {open: boolean}) => void | - |
| attribute | explain | type | Default value |
| ------------- | -------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| title | Title of Bubble Floating Layer Floating Layer Content | ReactNode | - |
| content | Content of Bubble Floating Layer | ReactNode | - |
| defaultOpen | Whether to hide by default | boolean | false |
| open | Used for manually controlling the appearance and concealment of bubble floating layers | boolean | - |
| hideArrow | Display arrows or not | boolean | false |
| offsetSpacing | The offset between the floating layer and the target element | number | 0 |
| placement | Bubble box position | string， The enumeration value is `center` `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` `bottom` | 'top' |
| trigger | Trigger behavior | string \|string[]， The enumeration value is' click '\|'hover' | 'click' |
| onOpenChange | The callback method for bubble floating layer manifestation and concealment | (e: React.MouseEvent<HTMLDivElement\>,data: {open: boolean}) => void | - |

### Style variables

Expand Down
38 changes: 28 additions & 10 deletions packages/bui-core/src/Popover/index.zh-CN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,23 @@ export default () => {
};
```

### offsetSpacing 浮层和目标元素间隔

可以设置offsetSpacing来控制和目标元素的距离

```tsx
import { Popover } from '@bifrostui/react';
import React from 'react';

export default () => {
return (
<Popover title="This is a popover" offsetSpacing={20} defaultOpen>
<span>offsetSpacing控制目标间隔（设置20 以便观察）</span>
</Popover>
);
};
```

### hideArrow 箭头展示

可以设置 `hideArrow` 为 true 隐藏箭头
Expand Down Expand Up @@ -236,16 +253,17 @@ export default () => {

### API

| 属性 | 说明 | 类型 | 默认值 |
| ------------ | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| title | 气泡浮层的标题浮层内容 | ReactNode | - |
| content | 气泡浮层的内容 | ReactNode | - |
| defaultOpen | 默认是否显隐 | boolean | false |
| open | 用于手动控制气泡浮层显隐 | boolean | - |
| hideArrow | 是否展示箭头 | boolean | false |
| placement | 气泡框位置 | string，枚举值是 `center` `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` `bottom` | 'top' |
| trigger | 触发行为 | string \| string[]，枚举值是 'click' \| 'hover' | 'click' |
| onOpenChange | 气泡浮层显隐的回调方法 | (e: React.MouseEvent<HTMLDivElement\>,data: {open: boolean}) => void | - |
| 属性 | 说明 | 类型 | 默认值 |
| ------------- | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| title | 气泡浮层的标题浮层内容 | ReactNode | - |
| content | 气泡浮层的内容 | ReactNode | - |
| defaultOpen | 默认是否显隐 | boolean | false |
| open | 用于手动控制气泡浮层显隐 | boolean | - |
| hideArrow | 是否展示箭头 | boolean | false |
| offsetSpacing | 浮层与目标元素的偏移量 | number | 0 |
| placement | 气泡框位置 | string，枚举值是 `center` `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` `bottom` | 'top' |
| trigger | 触发行为 | string \| string[]，枚举值是 'click' \| 'hover' | 'click' |
| onOpenChange | 气泡浮层显隐的回调方法 | (e: React.MouseEvent<HTMLDivElement\>,data: {open: boolean}) => void | - |

### 样式变量

Expand Down
2 changes: 2 additions & 0 deletions packages/bui-core/src/Tooltip/Tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ const Tooltip = React.forwardRef<HTMLElement, TooltipProps>((props, ref) => {
children,
title,
defaultOpen,
offsetSpacing = 0,
placement = 'top',
trigger = 'click',
onOpenChange,
Expand Down Expand Up @@ -84,6 +85,7 @@ const Tooltip = React.forwardRef<HTMLElement, TooltipProps>((props, ref) => {
childrenRef,
arrowDirection,
arrowLocation,
offsetSpacing,
selector: `[data-id="tt_${ttId}"]`,
});
if (!result) return;
Expand Down
4 changes: 4 additions & 0 deletions packages/bui-core/src/Tooltip/Tooltip.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,10 @@ export type TooltipProps<
* 用于手动控制气泡浮层显隐
*/
open?: boolean;
/**
* 用于控制气泡浮层和目标元素偏移量
*/
offsetSpacing?: number;
/**
* 气泡框位置
* @default 'top'
Expand Down
Loading
Loading