mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-02 11:58:10 +08:00
feat:Badge组件支持offset、overflowCount、color设置 (#2796)
Co-authored-by: wangyu90 <wangyu90@baidu.com>
This commit is contained in:
wangyuks
GitHub
parent
adfa9f6d32
commit
ad71a3ada3
@ -133,6 +133,19 @@ order: 30
|
||||
]
|
||||
```
|
||||
|
||||
通过 `offset` 来控制角标显示位置，offset优先级大于position。当设置了offset后，以postion为top-right为基准进行定位。offset在mode=ribbon下设置无效。
|
||||
|
||||
```schema: scope="body"
|
||||
[
|
||||
{
|
||||
"type": "avatar",
|
||||
"badge": {
|
||||
"offset": [10, 10]
|
||||
}
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
## 动态数字
|
||||
|
||||
`text` 可以取上下文变量。
|
||||
@ -156,6 +169,26 @@ order: 30
|
||||
}
|
||||
```
|
||||
|
||||
## 设置封顶值
|
||||
|
||||
通过 `overflowCount` 可以设置封顶值。超过 overflowCount 的会显示为 ${overflowCount}+，默认的 overflowCount 为 99
|
||||
|
||||
```schema
|
||||
{
|
||||
"type": "page",
|
||||
"body": [
|
||||
{
|
||||
"type": "avatar",
|
||||
"badge": {
|
||||
"mode": "text",
|
||||
"text": 10,
|
||||
"overflowCount": 9
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 动态控制是否显示角标
|
||||
|
||||
角标可以直接写表达式来判断是否显示
|
||||
@ -246,6 +279,24 @@ order: 30
|
||||
]
|
||||
```
|
||||
|
||||
## 设置角标级别
|
||||
|
||||
通过 `level` 来设置角标级别，改变角标背景颜色
|
||||
|
||||
```schema: scope="body"
|
||||
[
|
||||
{
|
||||
"type": "avatar",
|
||||
"badge": {
|
||||
"mode": "text",
|
||||
"text": 10,
|
||||
"size": 20,
|
||||
"level": "success"
|
||||
}
|
||||
},
|
||||
]
|
||||
```
|
||||
|
||||
## 是否显示动画
|
||||
|
||||
在默认点状态下，可以通过设置 `animation` 属性来控制是否显示动画
|
||||
@ -290,14 +341,18 @@ order: 30
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------- | --------- | ------ | ------------------------- |
|
||||
| className | `string` | | 外层 dom 的类名 |
|
||||
| text | `text` | | 数字 |
|
||||
| mode | `string` | | 角标类型，可以是 dot/text |
|
||||
| className | `string` | | 外层 dom 的类名 |
|
||||
| animation | `boolean` | | 角标是否显示动画 |
|
||||
| style | `object` | | 角标的自定义样式 |
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------- | ------------------- | ---------- | ----------------------------------------------------------------|
|
||||
| mode | `string` | dot | 角标类型，可以是 dot/text |
|
||||
| text | `text`、`number` | | 角标文案，支持字符串和数字，在mode='dot'下设置无效 |
|
||||
| size | `number` | | 角标大小 |
|
||||
| level | `string` | | 角标级别, 可以是info/success/warning/danger, 设置之后角标背景颜色不同 |
|
||||
| overflowCount | `number` | 99 | 设置封顶的数字值 |
|
||||
| position | `string` | top-right | 角标位置， 可以是top-right/top-left/bottom-right/bottom-left |
|
||||
| offset | `number[top, left]` | | 角标位置，优先级大于position，当设置了offset后，以postion为top-right为基准进行定位
|
||||
| className | `string` | | 外层 dom 的类名 |
|
||||
| animation | `boolean` | | 角标是否显示动画 |
|
||||
| style | `object` | | 角标的自定义样式 |
|
||||
| visibleOn | [表达式](../../../docs/concepts/expression) | | 控制角标的显示隐藏 |
|
||||
|
||||
@ -166,6 +166,10 @@
|
||||
|
||||
--Badge-size: var(--gap-md);
|
||||
--Badge-color: var(--white);
|
||||
--Badge--success-bg: var(--success);
|
||||
--Badge--info-bg: var(--info);
|
||||
--Badge--warning-bg: var(--warning);
|
||||
--Badge--danger-bg: var(--danger);
|
||||
|
||||
--Button--danger-bg: var(--danger);
|
||||
--Button--danger-border: var(--Button--danger-bg);
|
||||
|
||||
@ -12,7 +12,6 @@
|
||||
transform-origin: 100% 0;
|
||||
z-index: auto;
|
||||
border-radius: calc(var(--Badge-size) / 2);
|
||||
box-shadow: 0 0 0 1px #fff;
|
||||
}
|
||||
|
||||
&--top-left {
|
||||
@ -38,6 +37,21 @@
|
||||
transform: translate(50%, 50%);
|
||||
}
|
||||
|
||||
&--danger {
|
||||
background: var(--Badge--danger-bg);
|
||||
}
|
||||
|
||||
&--info {
|
||||
background: var(--Badge--info-bg);
|
||||
}
|
||||
|
||||
&--success {
|
||||
background: var(--Badge--success-bg);
|
||||
}
|
||||
|
||||
&--warning {
|
||||
background: var(--Badge--warning-bg);
|
||||
}
|
||||
// 显示文字
|
||||
&-text {
|
||||
color: var(--Badge-color);
|
||||
|
||||
@ -17,7 +17,7 @@ export interface BadgeSchema extends BaseSchema {
|
||||
/**
|
||||
* 文本内容
|
||||
*/
|
||||
text?: string;
|
||||
text?: string | number;
|
||||
|
||||
/**
|
||||
* 大小
|
||||
@ -29,11 +29,21 @@ export interface BadgeSchema extends BaseSchema {
|
||||
*/
|
||||
mode?: 'text' | 'dot';
|
||||
|
||||
/**
|
||||
* 角标位置，优先级大于position
|
||||
*/
|
||||
offset?: [number | string, number | string];
|
||||
|
||||
/**
|
||||
* 角标位置
|
||||
*/
|
||||
position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
|
||||
|
||||
/**
|
||||
* 封顶的数字值
|
||||
*/
|
||||
overflowCount?: number;
|
||||
|
||||
/**
|
||||
* 动态控制是否显示
|
||||
*/
|
||||
@ -50,6 +60,11 @@ export interface BadgeSchema extends BaseSchema {
|
||||
style?: {
|
||||
[propName: string]: any;
|
||||
};
|
||||
|
||||
/**
|
||||
* 提示类型
|
||||
*/
|
||||
level?: 'info' | 'warning' | 'success' | 'danger';
|
||||
}
|
||||
|
||||
export interface BadgeProps {
|
||||
@ -81,10 +96,13 @@ export class Badge extends React.Component<BadgeProps, object> {
|
||||
text,
|
||||
size,
|
||||
style,
|
||||
offset,
|
||||
position = 'top-right',
|
||||
overflowCount = 99,
|
||||
visibleOn,
|
||||
className,
|
||||
animation
|
||||
animation,
|
||||
level = 'danger'
|
||||
} = badge;
|
||||
|
||||
if (visibleOn) {
|
||||
@ -111,6 +129,12 @@ export class Badge extends React.Component<BadgeProps, object> {
|
||||
height: size,
|
||||
lineHeight: size + 'px'
|
||||
};
|
||||
// 当text、overflowCount都为number类型时，进行封顶值处理
|
||||
if (typeof text === 'number' && typeof overflowCount === 'number') {
|
||||
text = (
|
||||
(text as number) > (overflowCount as number) ? `${overflowCount}+` : text
|
||||
) as string | number;
|
||||
}
|
||||
|
||||
if (!text) {
|
||||
isDisplay = false;
|
||||
@ -121,6 +145,17 @@ export class Badge extends React.Component<BadgeProps, object> {
|
||||
sizeStyle = {width: size, height: size};
|
||||
}
|
||||
|
||||
let offsetStyle = {};
|
||||
// 如果设置了offset属性，offset在position为'top-right'的基础上进行translate定位
|
||||
if (offset && offset.length) {
|
||||
position = 'top-right';
|
||||
const left = `calc(50% + ${parseInt(offset[0] as string, 10)}px)`;
|
||||
const right = `calc(-50% + ${parseInt(offset[1] as string, 10)}px)`;
|
||||
offsetStyle = {
|
||||
transform: `translate(${left}, ${right})`,
|
||||
};
|
||||
}
|
||||
|
||||
let animationBackground = 'var(--danger)';
|
||||
|
||||
if (style && style.background) {
|
||||
@ -148,15 +183,15 @@ export class Badge extends React.Component<BadgeProps, object> {
|
||||
{isDisplay ? (
|
||||
mode === 'dot' ? (
|
||||
<span
|
||||
className={cx('Badge-dot', `Badge--${position}`)}
|
||||
style={{...sizeStyle, ...style}}
|
||||
className={cx('Badge-dot', `Badge--${position}`, `Badge--${level}`)}
|
||||
style={{...offsetStyle, ...sizeStyle, ...style}}
|
||||
>
|
||||
{animationElement}
|
||||
</span>
|
||||
) : (
|
||||
<span
|
||||
className={cx('Badge-text', `Badge--${position}`)}
|
||||
style={{...sizeStyle, ...style}}
|
||||
className={cx('Badge-text', `Badge--${position}`, `Badge--${level}`)}
|
||||
style={{...offsetStyle, ...sizeStyle, ...style}}
|
||||
>
|
||||
{text}
|
||||
{animationElement}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user