| Цитата |
|---|
class CircleBalloon extends BX.UI.Notification.Balloon { render() { var content = this.getContent(); return BX.create("div", { props: { className: "circle-balloon" }, children: [ BX.create("div", { props: { className: "circle-balloon-content" }, html: BX.type.isDomNode(content) ? null : content, children: BX.type.isDomNode(content) ? [content] : [] }) ] }) } }
BX.UI.Notification.Center.notify({ content: "Hello", type: "CircleBalloon", }); |
Вот рабочий пример кастомного балуна, на базе вашего модуля алертов:
| Код |
|---|
BX.UI.Notification.Center.notify({
content: 'Внимание дока по нотификациям устарела!',
data: {type:'danger', icon:'warning', size:'xs'},
position: 'top-center',
width:'100%',
render: alertBalloonRenderer,
});
function alertBalloonRenderer()
{
//debugger;
var content = this.getContent(),
options = this.getData()||{},
icon = options.icon || false,
size = options.size || 'md',
type = options.type || false,
width = this.getWidth(),
cssClass = 'ui-alert';
if(icon)
cssClass += ' ui-alert-icon-'+icon;
if(size)
cssClass += ' ui-alert-'+size;
if(type)
cssClass += ' ui-alert-'+type;
return BX.create("div", {
props: {
className: cssClass
},
style: {
width: BX.type.isNumber(width) ? (width + "px") : width
},
children: [
BX.create("span", {
props: {
className: "ui-alert-message"
},
html: BX.type.isDomNode(content) ? null : content,
children: BX.type.isDomNode(content) ? [content] : []
})
]
})
} |