@alicloud/console-components/esm/rc/balloon/demos/demo1.js

Alibaba Cloud React Components

/**
 * title: "带标题气泡"
 * description: "通过设置align属性设置气泡出现方向，气泡内容通过Children自定义。"
 */
import React from 'react';
import { Balloon, Button } from '@alicloud/console-components';
var titleStyle = {
    fontSize: '12px',
    fontWeight: 500,
    lineHeight: '20px',
    marginBottom: '8px',
};
var but = (React.createElement(Button, { id: "topRight", style: {
        margin: '25px 0 25px 400px',
        background: '#E5E5E5',
    } }));
var baseWithTittle = {
    trigger: but,
    content: (React.createElement("div", { style: { width: '266px' } },
        React.createElement("div", { style: titleStyle }, "\u6587\u5B57\u63D0\u793A"),
        "\u70B9\u51FB/\u9F20\u6807\u79FB\u5165\u5143\u7D20\uFF0C\u5F39\u51FA\u6C14\u6CE1\u6D6E\u5C42\uFF0C\u5185\u5BB9\u6587\u6848\u8D85\u51FA\u957F\u5EA6\u540E\u5141\u8BB8\u81EA\u52A8\u6362\u884C\u3002")),
};
export default (function () {
    return (React.createElement(Balloon, { align: "l", closable: false, trigger: baseWithTittle.trigger, triggerType: "click" }, baseWithTittle.content));
});