Alert
misc
Alert user from something
| Example | Just a title to inform about something |
| HTML code | <DIV class="alert">
<DIV class="columns">
<DIV class="column alert__body">
<H4>Just a title to inform about something</H4>
</DIV>
</DIV>
</DIV> |
| Type | molecule |
| Group | misc |
| Elements | title, description, icon |
| Todo | Menu?, button? |
| More examples | Icon and titleAlert with no description Everything OKBlinking alert boxMake alert -box blinking using blink -style Everything OKYou can no start to do other things |
PHP
Wrapper to use element through PHP
| Extends | eUiElement |
| Render | html |
| Create arguments | title, description, icon, color |
| Code example | Basic usagevar $Alert = $this->get('ui', 'alert', Array(
'icon' => 'warning',
'title' => 'Title',
'description' => 'Description',
'color' => 'red'
));All parametersvar $Alert = $this->get('ui', 'alert', Array(
'icon' => 'warning',
'title' => 'Title',
'description' => 'Description',
'color' => 'red',
'size' => 'jumbo',
'tooltip' => 'Tooltip text',
'link' => 'link/route',
'onclick' => 'runMe()'
)); |
Javascript
Wrapper to use element through Javascript
| Code example | Basic usevar Alert = cms.get('ui','alert',{
icon: 'warning',
title: 'Title',
description: 'Description'
});Size and colorvar Alert = cms.get('ui','alert',{
title: 'Title',
description: 'Description',
icon: 'warning',
color: 'green',
size: 'large'
});StatusPredefines icon and color var $Blank = cms.get('ui', 'alert', {
status: 'error', // error, success
title: 'Error title',
description: 'Additional description text'
}); |
Styles
Elements Css style
| jumbo | JumboDescription text |
| large | LargeDescription text |
| normal | NormalDescription text |
| small | SmallDescription text |
| mini | MiniDescription text |
| blink | BlinkDescription text |
| plain | PlainDescription text |
| square | SquareDescription text |
| azure | AzureDescription text |
| blue | BlueDescription text |
| violet | VioletDescription text |
| purple | PurpleDescription text |
| pink | PinkDescription text |
| red | RedDescription text |
| brown | BrownDescription text |
| orange | OrangeDescription text |
| yellow | YellowDescription text |
| green | GreenDescription text |
| darkgreen | DarkgreenDescription text |
| white | WhiteDescription text |
| lightgray | LightgrayDescription text |
| gray | GrayDescription text |
| darkgray | DarkgrayDescription text |
| black | BlackDescription text |
| placeholder | PlaceholderDescription text |
| success | SuccessDescription text |
| warning | WarningDescription text |
| danger | DangerDescription text |
| error | ErrorDescription text |
| info | InfoDescription text |
| muted | MutedDescription text |
| selected | SelectedDescription text |
| save | SaveDescription text |
| delete | DeleteDescription text |
| load | LoadDescription text |
| cancel | CancelDescription text |