test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-29 18:48:45 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix:调整offset属性基于position位置进行水平、垂直偏移 (#4861)

Browse Source 
Co-authored-by: ”jiatianqi“ <”jiatianqi@baidu.com“>
This commit is contained in:
Ma ke 2022-07-14 12:43:40 +08:00 committed by GitHub
parent 07ff1824a6
commit 7a5fe8d9bc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
docs/zh-CN/components/badge.md
View File

@ -144,7 +144,7 @@ order: 30
] ]
``` ```
通过 `offset` 来控制角标显示位置，offset优先级大于position。当设置了offset后，以postion为top-right为基准进行定位。offset在mode=ribbon下设置无效。 通过 `offset` 来控制角标显示位置，offset 相对于 position 位置进行水平、垂直偏移。offset 在 mode=ribbon 下设置无效。
```schema: scope="body" ```schema: scope="body"
[ [
@ -352,18 +352,19 @@ order: 30
} }
] ]
``` ```
## 属性表 ## 属性表
| 属性名 | 类型 | 默认值 | 说明 | | 属性名 | 类型 | 默认值 | 说明 |
| ------------- | ------------------- | ---------- | ----------------------------------------------------------------| | ------------- | ------------------------------------------- | --------- | ---------------------------------------------------------------------- |
| mode | `string` | dot | 角标类型，可以是 dot/text/ribbon | | mode | `string` | dot | 角标类型，可以是 dot/text/ribbon |
| text | `text`、`number` | | 角标文案，支持字符串和数字，在mode='dot'下设置无效 | | text | `string`\|`number` | | 角标文案，支持字符串和数字，在 mode='dot'下设置无效 |
| size | `number` | | 角标大小 | | size | `number` | | 角标大小 |
| level | `string` | | 角标级别, 可以是info/success/warning/danger, 设置之后角标背景颜色不同 | | level | `string` | | 角标级别, 可以是 info/success/warning/danger, 设置之后角标背景颜色不同 |
| overflowCount | `number` | 99 | 设置封顶的数字值 | | overflowCount | `number` | 99 | 设置封顶的数字值 |
| position | `string` | top-right | 角标位置， 可以是top-right/top-left/bottom-right/bottom-left | | position | `string` | top-right | 角标位置， 可以是 top-right/top-left/bottom-right/bottom-left |
| offset | `number[top, left]` | | 角标位置，优先级大于position，当设置了offset后，以postion为top-right为基准进行定位 | offset | `number[top, left]` | [0, 0] | 角标位置，offset 相对于 position 位置进行水平、垂直偏移 |
| className | `string` | | 外层 dom 的类名 | | className | `string` | | 外层 dom 的类名 |
| animation | `boolean` | | 角标是否显示动画 | | animation | `boolean` | | 角标是否显示动画 |
| style | `object` | | 角标的自定义样式 | | style | `object` | | 角标的自定义样式 |
| visibleOn | [表达式](../../../docs/concepts/expression) | | 控制角标的显示隐藏 | | visibleOn | [表达式](../../../docs/concepts/expression) | | 控制角标的显示隐藏 |

4
packages/amis-ui/src/components/Badge.tsx
View File

@ -32,7 +32,7 @@ export interface BadgeObject {
mode?: 'text' | 'dot' | 'ribbon'; mode?: 'text' | 'dot' | 'ribbon';
/** /**
* 角标位置，优先级大于position * 角标位置，相对于position的位置进行偏移
*/ */
offset?: [number | string, number | string]; offset?: [number | string, number | string];
@ -226,9 +226,7 @@ export class Badge extends React.Component<BadgeProps, object> {
} }
let offsetStyle = {}; let offsetStyle = {};
// 如果设置了offset属性，offset在position为'top-right'的基础上进行translate定位
if (offset && offset.length) { if (offset && offset.length) {
position = 'top-right';
const left = `calc(50% + ${parseInt(offset[0] as string, 10)}px)`; const left = `calc(50% + ${parseInt(offset[0] as string, 10)}px)`;
const right = `calc(-50% + ${parseInt(offset[1] as string, 10)}px)`; const right = `calc(-50% + ${parseInt(offset[1] as string, 10)}px)`;
offsetStyle = { offsetStyle = {