[QUOTE]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",
});[/QUOTE]
Вот рабочий пример кастомного балуна, на базе вашего модуля алертов:
[CODE]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] : []
})
]
})
}[/CODE]
{
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",
});[/QUOTE]
Вот рабочий пример кастомного балуна, на базе вашего модуля алертов:
[CODE]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] : []
})
]
})
}[/CODE]
