@alicloud/console-components/esm/rc/badge/demos/demo4.js

Alibaba Cloud React Components

/**
 * title: "小红点"
 * description: "dot 属性控制不展示数字，只展示一个小红点"
 */
import React from 'react';
import { Badge } from '@alicloud/console-components';
var squareStyles = {
    display: 'inline-block',
    borderRadius: '4px',
    background: '#eee',
    width: '32px',
    height: '32px',
};
var circleStyles = {
    display: 'inline-block',
    borderRadius: '16px',
    background: '#eee',
    width: '32px',
    height: '32px',
};
var contentStyle = {
    display: 'flex',
    gridTemplateColumns: 'repeat(3, 1fr)',
    gap: 36,
    alignItems: 'center',
};
var Square = function () { return React.createElement("div", { style: squareStyles }); };
var Circle = function () { return React.createElement("div", { style: circleStyles }); };
export default function Demo4() {
    return (React.createElement("div", { style: contentStyle },
        React.createElement(Badge, { dot: true },
            React.createElement(Square, null)),
        React.createElement(Badge, { dot: true },
            React.createElement(Circle, null)),
        React.createElement(Badge, { dot: true },
            React.createElement("span", { style: { marginRight: '6px' } }, "\u6587\u5B57\u63CF\u8FF0"))));
}