API

• Connecting
• Use
• Text
• Size
• Color
• Icons
• Cross
• Animation
• Inline-block container

Connecting at PHP page

\Bitrix\Main\UI\Extension::load("ui.alerts");

Use

Method getContainer() returns an alert layout.

var myAlert = new BX.UI.Alert({ 
    /*[options]*/ 
});

myAlert.getContainer()

Parameters

Text

text - can receive html.

var myAlert = new BX.UI.Alert({ 
    text: "<strong>Attention!</strong> Alert text is located here.",
    inline: true
});

//------------

myAlert.setText("<strong>Attention!</strong> Alert text is located here.");

Size

size {string}- defines alert size.

var myAlert = new BX.UI.Alert({ 
    size: BX.UI.Alert.Size.SMALL
});

//------------

myAlert.setSize(BX.UI.Alert.Size.SMALL);

Possible values:

BX.UI.Alert.Size.MEDIUM //Default
BX.UI.Alert.Size.SMALL

Color

color {string} - defines alert color.

var myAlert = new BX.UI.Alert({ 
    color: BX.UI.Alert.Color.WARNING
});

//------------

myAlert.setColor(BX.UI.Alert.Color.SUCCESS);

Possible values:

BX.UI.Alert.Color.PRIMARY 
BX.UI.Alert.Color.SUCCESS
BX.UI.Alert.Color.WARNING
BX.UI.Alert.Color.DANGER

Icons

icon {string} - adds an icon

BX.UI.Alert({ 
    icon: BX.UI.Alert.Icon.INFO
});

Possible values:

BX.UI.Alert.Icon.INFO
BX.UI.Alert.Icon.WARNING
BX.UI.Alert.Icon.DANGER

Закрыть

closeBtn {boolean} - adds a cross symbol in the top right corner of the alert. Clicking on the cross deletes .ui-alert and its contents from DOM.

BX.UI.Alert({ 
    closeBtn: true
});

Animation for closing/opening

animate {boolean} - adds effects when alerts is displayed/deleted.

BX.UI.Alert({ 
    animate: true
});

Inline-block container

inline {boolean} - adds inline-block element properties to an alert.

BX.UI.Alert({ 
    inline: true
});

Message not pertaining to an alert