composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-04-26 20:18:52 +02:00
Code Issues Packages Projects Releases Wiki Activity
Files
c02f3202d9d9ca8014989a7e54fa5e4a3edcf759
iTop/.doc/UI/build/html/generated/Component/Alert/Alert.html
bruno-ds c02f3202d9 update for linux
2021-09-28 16:29:12 +02:00

808 lines
37 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html class="writer-html4" lang="en" >
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Alert &mdash; iTop UI 3.0.0 documentation</title><link rel="stylesheet" href="../../../_static/css/theme.css" type="text/css" />
<link rel="stylesheet" href="../../../_static/pygments.css" type="text/css" />
<link rel="stylesheet" href="../../../_static/css/ui-doc.css" type="text/css" />
<!--[if lt IE 9]>
<script src="../../../_static/js/html5shiv.min.js"></script>
<![endif]-->
<script id="documentation_options" data-url_root="../../../" src="../../../_static/documentation_options.js"></script>
<script type="text/javascript" src="../../../_static/jquery.js"></script>
<script type="text/javascript" src="../../../_static/underscore.js"></script>
<script type="text/javascript" src="../../../_static/doctools.js"></script>
<script type="text/javascript" src="../../../_static/language_data.js"></script>
<script src="../../../_static/js/theme.js"></script>
<link rel="index" title="Index" href="../../../genindex.html" />
<link rel="search" title="Search" href="../../../search.html" />
<link rel="next" title="Button" href="../Button/Button.html" />
<link rel="prev" title="UI Components" href="../Component.html" />
</head>
<body class="wy-body-for-nav">
<div class="wy-grid-for-nav">
<nav data-toggle="wy-nav-shift" class="wy-nav-side">
<div class="wy-side-scroll">
<div class="wy-side-nav-search" >
<a href="../../../index.html" class="icon icon-home"> iTop UI<img src="../../../_static/itop-logo.png" class="logo" alt="Logo"/>
</a>
<div role="search">
<form id="rtd-search-form" class="wy-form" action="../../../search.html" method="get">
<input type="text" name="q" placeholder="Search docs" />
<input type="hidden" name="check_keywords" value="yes" />
<input type="hidden" name="area" value="default" />
</form>
</div>
</div><div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="Navigation menu">
<p class="caption"><span class="caption-text">Twig Base:</span></p>
<ul>
<li class="toctree-l1"><a class="reference internal" href="../../../TwigBase/TwigBase.html">Twig Base Presentation</a></li>
<li class="toctree-l1"><a class="reference internal" href="../../../TwigBaseTuto/TwigBaseTuto.html">Twig Base Tutorial</a></li>
<li class="toctree-l1"><a class="reference internal" href="../../../TwigBaseReference/TwigBaseReference.html">Twig Base Reference</a></li>
</ul>
<p class="caption"><span class="caption-text">Tags reference:</span></p>
<ul class="current">
<li class="toctree-l1 current"><a class="reference internal" href="../Component.html">UI Components</a><ul class="current">
<li class="toctree-l2 current"><a class="current reference internal" href="#">Alert</a><ul>
<li class="toctree-l3"><a class="reference internal" href="#output">Output</a></li>
<li class="toctree-l3"><a class="reference internal" href="#twig-tag">Twig Tag</a><ul>
<li class="toctree-l4"><a class="reference internal" href="#alert-neutral">Alert Neutral</a></li>
<li class="toctree-l4"><a class="reference internal" href="#alert-forinformation">Alert ForInformation</a></li>
<li class="toctree-l4"><a class="reference internal" href="#alert-forsuccess">Alert ForSuccess</a></li>
<li class="toctree-l4"><a class="reference internal" href="#alert-forwarning">Alert ForWarning</a></li>
<li class="toctree-l4"><a class="reference internal" href="#alert-fordanger">Alert ForDanger</a></li>
<li class="toctree-l4"><a class="reference internal" href="#alert-forfailure">Alert ForFailure</a></li>
<li class="toctree-l4"><a class="reference internal" href="#alert-withbrandingprimarycolor">Alert WithBrandingPrimaryColor</a></li>
<li class="toctree-l4"><a class="reference internal" href="#alert-withbrandingsecondarycolor">Alert WithBrandingSecondaryColor</a></li>
<li class="toctree-l4"><a class="reference internal" href="#alert-common-parameters">Alert common parameters</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="#examples">Examples</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../Button/Button.html">Button</a></li>
<li class="toctree-l2"><a class="reference internal" href="../ButtonGroup/ButtonGroup.html">ButtonGroup</a></li>
<li class="toctree-l2"><a class="reference internal" href="../CollapsibleSection/CollapsibleSection.html">CollapsibleSection</a></li>
<li class="toctree-l2"><a class="reference internal" href="../DataTable/DataTable.html">DataTable</a></li>
<li class="toctree-l2"><a class="reference internal" href="../Field/Field.html">Field</a></li>
<li class="toctree-l2"><a class="reference internal" href="../FieldBadge/FieldBadge.html">FieldBadge</a></li>
<li class="toctree-l2"><a class="reference internal" href="../FieldSet/FieldSet.html">FieldSet</a></li>
<li class="toctree-l2"><a class="reference internal" href="../Form/Form.html">Form</a></li>
<li class="toctree-l2"><a class="reference internal" href="../Input/FileSelect/FileSelect.html">FileSelect</a></li>
<li class="toctree-l2"><a class="reference internal" href="../Input/Input.html">Input</a></li>
<li class="toctree-l2"><a class="reference internal" href="../Input/Select/Select.html">Select</a></li>
<li class="toctree-l2"><a class="reference internal" href="../Input/Select/SelectOption.html">SelectOption</a></li>
<li class="toctree-l2"><a class="reference internal" href="../Panel/Panel.html">Panel</a></li>
<li class="toctree-l2"><a class="reference internal" href="../Spinner/Spinner.html">Spinner</a></li>
<li class="toctree-l2"><a class="reference internal" href="../Title/Title.html">Title</a></li>
<li class="toctree-l2"><a class="reference internal" href="../Toolbar/Toolbar.html">Toolbar</a></li>
<li class="toctree-l2"><a class="reference internal" href="../Toolbar/ToolbarSpacer/ToolbarSpacer.html">ToolbarSpacer</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../../Layout/Layout.html">UI Layouts</a></li>
</ul>
</div>
</div>
</nav>
<section data-toggle="wy-nav-shift" class="wy-nav-content-wrap"><nav class="wy-nav-top" aria-label="Mobile navigation menu" >
<i data-toggle="wy-nav-top" class="fa fa-bars"></i>
<a href="../../../index.html">iTop UI</a>
</nav>
<div class="wy-nav-content">
<div class="rst-content">
<div role="navigation" aria-label="Page navigation">
<ul class="wy-breadcrumbs">
<li><a href="../../../index.html" class="icon icon-home"></a> &raquo;</li>
<li><a href="../Component.html">UI Components</a> &raquo;</li>
<li>Alert</li>
<li class="wy-breadcrumbs-aside">
<a href="../../../_sources/generated/Component/Alert/Alert.rst.txt" rel="nofollow"> View page source</a>
</li>
</ul>
<hr/>
</div>
<div role="main" class="document" itemscope="itemscope" itemtype="http://schema.org/Article">
<div itemprop="articleBody">
<div class="section" id="alert">
<span id="id1"></span><h1>Alert<a class="headerlink" href="#alert" title="Permalink to this headline"></a></h1>
<p>Alerts are the main component to give feedback to the user or communicate page specific to system wide messages.
Alerts are a rectangular component displaying a title and a message.</p>
<hr class="docutils" />
<div class="section" id="output">
<h2>Output<a class="headerlink" href="#output" title="Permalink to this headline"></a></h2>
<table class="docutils field-list" frame="void" rules="none">
<col class="field-name" />
<col class="field-body" />
<tbody valign="top">
<tr class="field-odd field"><th class="field-name">Success Alert:</th><td class="field-body"></td>
</tr>
</tbody>
</table>
<img alt="../../../_images/AlertSuccess.png" src="../../../_images/AlertSuccess.png" />
<table class="docutils field-list" frame="void" rules="none">
<col class="field-name" />
<col class="field-body" />
<tbody valign="top">
<tr class="field-odd field"><th class="field-name">Failure Alert:</th><td class="field-body"></td>
</tr>
</tbody>
</table>
<img alt="../../../_images/AlertFailure.png" src="../../../_images/AlertFailure.png" />
<table class="docutils field-list" frame="void" rules="none">
<col class="field-name" />
<col class="field-body" />
<tbody valign="top">
<tr class="field-odd field"><th class="field-name" colspan="2">Information Alert:</th></tr>
<tr class="field-odd field"><td>&#160;</td><td class="field-body"></td>
</tr>
</tbody>
</table>
<img alt="../../../_images/AlertInformation.png" src="../../../_images/AlertInformation.png" />
<table class="docutils field-list" frame="void" rules="none">
<col class="field-name" />
<col class="field-body" />
<tbody valign="top">
<tr class="field-odd field"><th class="field-name">Warning Alert:</th><td class="field-body"></td>
</tr>
</tbody>
</table>
<img alt="../../../_images/AlertWarning.png" src="../../../_images/AlertWarning.png" />
</div>
<hr class="docutils" />
<div class="section" id="twig-tag">
<h2>Twig Tag<a class="headerlink" href="#twig-tag" title="Permalink to this headline"></a></h2>
<table class="docutils field-list" frame="void" rules="none">
<col class="field-name" />
<col class="field-body" />
<tbody valign="top">
<tr class="field-odd field"><th class="field-name">Tag:</th><td class="field-body"><strong>UIAlert</strong></td>
</tr>
<tr class="field-even field"><th class="field-name">Syntax:</th><td class="field-body"></td>
</tr>
</tbody>
</table>
<div class="highlight-twig notranslate"><div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">UIAlert</span> <span class="p">T</span><span class="nv">ype</span> <span class="o">{</span><span class="p">P</span><span class="nv">arameters</span><span class="o">}</span> <span class="cp">%}</span><span class="x"></span>
<span class="x"> Content Goes Here</span>
<span class="cp">{%</span> <span class="k">EndUIAlert</span> <span class="cp">%}</span><span class="x"></span>
</pre></div>
</div>
<table class="docutils field-list" frame="void" rules="none">
<col class="field-name" />
<col class="field-body" />
<tbody valign="top">
<tr class="field-odd field"><th class="field-name">Type:</th><td class="field-body"></td>
</tr>
</tbody>
</table>
<table border="1" class="docutils">
<colgroup>
<col width="57%" />
<col width="43%" />
</colgroup>
<tbody valign="top">
<tr class="row-odd"><td><a class="reference internal" href="#alertneutral"><span class="std std-ref">Neutral</span></a></td>
<td>Make a basis Alert component</td>
</tr>
<tr class="row-even"><td><a class="reference internal" href="#alertforinformation"><span class="std std-ref">ForInformation</span></a></td>
<td>Make an Alert component for informational messages</td>
</tr>
<tr class="row-odd"><td><a class="reference internal" href="#alertforsuccess"><span class="std std-ref">ForSuccess</span></a></td>
<td>Make an Alert component for successful messages</td>
</tr>
<tr class="row-even"><td><a class="reference internal" href="#alertforwarning"><span class="std std-ref">ForWarning</span></a></td>
<td>Make an Alert component for warning messages</td>
</tr>
<tr class="row-odd"><td><a class="reference internal" href="#alertfordanger"><span class="std std-ref">ForDanger</span></a></td>
<td>Make an Alert component for danger messages</td>
</tr>
<tr class="row-even"><td><a class="reference internal" href="#alertforfailure"><span class="std std-ref">ForFailure</span></a></td>
<td>Make an Alert component for failure messages</td>
</tr>
<tr class="row-odd"><td><a class="reference internal" href="#alertwithbrandingprimarycolor"><span class="std std-ref">WithBrandingPrimaryColor</span></a></td>
<td>Make an Alert component with primary color scheme</td>
</tr>
<tr class="row-even"><td><a class="reference internal" href="#alertwithbrandingsecondarycolor"><span class="std std-ref">WithBrandingSecondaryColor</span></a></td>
<td>Make an Alert component with secondary color scheme</td>
</tr>
</tbody>
</table>
<div class="section" id="alert-neutral">
<span id="alertneutral"></span><h3>Alert Neutral<a class="headerlink" href="#alert-neutral" title="Permalink to this headline"></a></h3>
<table class="docutils field-list" frame="void" rules="none">
<col class="field-name" />
<col class="field-body" />
<tbody valign="top">
<tr class="field-odd field"><th class="field-name">syntax:</th><td class="field-body"></td>
</tr>
</tbody>
</table>
<div class="highlight-twig notranslate"><div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">UIAlert</span> <span class="p">N</span><span class="nv">eutral</span> <span class="o">{</span><span class="nv">sTitle</span><span class="s1">:&#39;value&#39;</span><span class="o">,</span> <span class="nv">sContent</span><span class="s1">:&#39;value&#39;</span><span class="o">,</span> <span class="nv">sId</span><span class="s1">:&#39;value&#39;</span><span class="o">}</span> <span class="cp">%}</span><span class="x"></span>
<span class="x"> Content Goes Here</span>
<span class="cp">{%</span> <span class="k">EndUIAlert</span> <span class="cp">%}</span><span class="x"></span>
</pre></div>
</div>
<table class="docutils field-list" frame="void" rules="none">
<col class="field-name" />
<col class="field-body" />
<tbody valign="top">
<tr class="field-odd field"><th class="field-name">parameters:</th><td class="field-body"></td>
</tr>
</tbody>
</table>
<table border="1" class="docutils">
<colgroup>
<col width="12%" />
<col width="10%" />
<col width="12%" />
<col width="7%" />
<col width="59%" />
</colgroup>
<tbody valign="top">
<tr class="row-odd"><td>sTitle</td>
<td>string</td>
<td>optional</td>
<td>‘’</td>
<td>Title of the alert</td>
</tr>
<tr class="row-even"><td>sContent</td>
<td>string</td>
<td>optional</td>
<td>‘’</td>
<td>The raw HTML content, must be already sanitized</td>
</tr>
<tr class="row-odd"><td>sId</td>
<td>string</td>
<td>optional</td>
<td>NULL</td>
<td>id of the html block</td>
</tr>
</tbody>
</table>
</div>
<div class="section" id="alert-forinformation">
<span id="alertforinformation"></span><h3>Alert ForInformation<a class="headerlink" href="#alert-forinformation" title="Permalink to this headline"></a></h3>
<table class="docutils field-list" frame="void" rules="none">
<col class="field-name" />
<col class="field-body" />
<tbody valign="top">
<tr class="field-odd field"><th class="field-name">syntax:</th><td class="field-body"></td>
</tr>
</tbody>
</table>
<div class="highlight-twig notranslate"><div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">UIAlert</span> <span class="p">F</span><span class="nv">orInformation</span> <span class="o">{</span><span class="nv">sTitle</span><span class="s1">:&#39;value&#39;</span><span class="o">,</span> <span class="nv">sContent</span><span class="s1">:&#39;value&#39;</span><span class="o">,</span> <span class="nv">sId</span><span class="s1">:&#39;value&#39;</span><span class="o">}</span> <span class="cp">%}</span><span class="x"></span>
<span class="x"> Content Goes Here</span>
<span class="cp">{%</span> <span class="k">EndUIAlert</span> <span class="cp">%}</span><span class="x"></span>
</pre></div>
</div>
<table class="docutils field-list" frame="void" rules="none">
<col class="field-name" />
<col class="field-body" />
<tbody valign="top">
<tr class="field-odd field"><th class="field-name">parameters:</th><td class="field-body"></td>
</tr>
</tbody>
</table>
<table border="1" class="docutils">
<colgroup>
<col width="12%" />
<col width="10%" />
<col width="12%" />
<col width="7%" />
<col width="59%" />
</colgroup>
<tbody valign="top">
<tr class="row-odd"><td>sTitle</td>
<td>string</td>
<td>optional</td>
<td>‘’</td>
<td>Title of the alert</td>
</tr>
<tr class="row-even"><td>sContent</td>
<td>string</td>
<td>optional</td>
<td>‘’</td>
<td>The raw HTML content, must be already sanitized</td>
</tr>
<tr class="row-odd"><td>sId</td>
<td>string</td>
<td>optional</td>
<td>NULL</td>
<td>id of the html block</td>
</tr>
</tbody>
</table>
</div>
<div class="section" id="alert-forsuccess">
<span id="alertforsuccess"></span><h3>Alert ForSuccess<a class="headerlink" href="#alert-forsuccess" title="Permalink to this headline"></a></h3>
<table class="docutils field-list" frame="void" rules="none">
<col class="field-name" />
<col class="field-body" />
<tbody valign="top">
<tr class="field-odd field"><th class="field-name">syntax:</th><td class="field-body"></td>
</tr>
</tbody>
</table>
<div class="highlight-twig notranslate"><div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">UIAlert</span> <span class="p">F</span><span class="nv">orSuccess</span> <span class="o">{</span><span class="nv">sTitle</span><span class="s1">:&#39;value&#39;</span><span class="o">,</span> <span class="nv">sContent</span><span class="s1">:&#39;value&#39;</span><span class="o">,</span> <span class="nv">sId</span><span class="s1">:&#39;value&#39;</span><span class="o">}</span> <span class="cp">%}</span><span class="x"></span>
<span class="x"> Content Goes Here</span>
<span class="cp">{%</span> <span class="k">EndUIAlert</span> <span class="cp">%}</span><span class="x"></span>
</pre></div>
</div>
<table class="docutils field-list" frame="void" rules="none">
<col class="field-name" />
<col class="field-body" />
<tbody valign="top">
<tr class="field-odd field"><th class="field-name">parameters:</th><td class="field-body"></td>
</tr>
</tbody>
</table>
<table border="1" class="docutils">
<colgroup>
<col width="12%" />
<col width="10%" />
<col width="12%" />
<col width="7%" />
<col width="59%" />
</colgroup>
<tbody valign="top">
<tr class="row-odd"><td>sTitle</td>
<td>string</td>
<td>optional</td>
<td>‘’</td>
<td>Title of the alert</td>
</tr>
<tr class="row-even"><td>sContent</td>
<td>string</td>
<td>optional</td>
<td>‘’</td>
<td>The raw HTML content, must be already sanitized</td>
</tr>
<tr class="row-odd"><td>sId</td>
<td>string</td>
<td>optional</td>
<td>NULL</td>
<td>&#160;</td>
</tr>
</tbody>
</table>
</div>
<div class="section" id="alert-forwarning">
<span id="alertforwarning"></span><h3>Alert ForWarning<a class="headerlink" href="#alert-forwarning" title="Permalink to this headline"></a></h3>
<table class="docutils field-list" frame="void" rules="none">
<col class="field-name" />
<col class="field-body" />
<tbody valign="top">
<tr class="field-odd field"><th class="field-name">syntax:</th><td class="field-body"></td>
</tr>
</tbody>
</table>
<div class="highlight-twig notranslate"><div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">UIAlert</span> <span class="p">F</span><span class="nv">orWarning</span> <span class="o">{</span><span class="nv">sTitle</span><span class="s1">:&#39;value&#39;</span><span class="o">,</span> <span class="nv">sContent</span><span class="s1">:&#39;value&#39;</span><span class="o">,</span> <span class="nv">sId</span><span class="s1">:&#39;value&#39;</span><span class="o">}</span> <span class="cp">%}</span><span class="x"></span>
<span class="x"> Content Goes Here</span>
<span class="cp">{%</span> <span class="k">EndUIAlert</span> <span class="cp">%}</span><span class="x"></span>
</pre></div>
</div>
<table class="docutils field-list" frame="void" rules="none">
<col class="field-name" />
<col class="field-body" />
<tbody valign="top">
<tr class="field-odd field"><th class="field-name">parameters:</th><td class="field-body"></td>
</tr>
</tbody>
</table>
<table border="1" class="docutils">
<colgroup>
<col width="12%" />
<col width="10%" />
<col width="12%" />
<col width="7%" />
<col width="59%" />
</colgroup>
<tbody valign="top">
<tr class="row-odd"><td>sTitle</td>
<td>string</td>
<td>optional</td>
<td>‘’</td>
<td>Title of the alert</td>
</tr>
<tr class="row-even"><td>sContent</td>
<td>string</td>
<td>optional</td>
<td>‘’</td>
<td>The raw HTML content, must be already sanitized</td>
</tr>
<tr class="row-odd"><td>sId</td>
<td>string</td>
<td>optional</td>
<td>NULL</td>
<td>id of the html block</td>
</tr>
</tbody>
</table>
</div>
<div class="section" id="alert-fordanger">
<span id="alertfordanger"></span><h3>Alert ForDanger<a class="headerlink" href="#alert-fordanger" title="Permalink to this headline"></a></h3>
<table class="docutils field-list" frame="void" rules="none">
<col class="field-name" />
<col class="field-body" />
<tbody valign="top">
<tr class="field-odd field"><th class="field-name">syntax:</th><td class="field-body"></td>
</tr>
</tbody>
</table>
<div class="highlight-twig notranslate"><div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">UIAlert</span> <span class="p">F</span><span class="nv">orDanger</span> <span class="o">{</span><span class="nv">sTitle</span><span class="s1">:&#39;value&#39;</span><span class="o">,</span> <span class="nv">sContent</span><span class="s1">:&#39;value&#39;</span><span class="o">,</span> <span class="nv">sId</span><span class="s1">:&#39;value&#39;</span><span class="o">}</span> <span class="cp">%}</span><span class="x"></span>
<span class="x"> Content Goes Here</span>
<span class="cp">{%</span> <span class="k">EndUIAlert</span> <span class="cp">%}</span><span class="x"></span>
</pre></div>
</div>
<table class="docutils field-list" frame="void" rules="none">
<col class="field-name" />
<col class="field-body" />
<tbody valign="top">
<tr class="field-odd field"><th class="field-name">parameters:</th><td class="field-body"></td>
</tr>
</tbody>
</table>
<table border="1" class="docutils">
<colgroup>
<col width="12%" />
<col width="10%" />
<col width="12%" />
<col width="7%" />
<col width="59%" />
</colgroup>
<tbody valign="top">
<tr class="row-odd"><td>sTitle</td>
<td>string</td>
<td>optional</td>
<td>‘’</td>
<td>Title of the alert</td>
</tr>
<tr class="row-even"><td>sContent</td>
<td>string</td>
<td>optional</td>
<td>‘’</td>
<td>The raw HTML content, must be already sanitized</td>
</tr>
<tr class="row-odd"><td>sId</td>
<td>string</td>
<td>optional</td>
<td>NULL</td>
<td>id of the html block</td>
</tr>
</tbody>
</table>
</div>
<div class="section" id="alert-forfailure">
<span id="alertforfailure"></span><h3>Alert ForFailure<a class="headerlink" href="#alert-forfailure" title="Permalink to this headline"></a></h3>
<table class="docutils field-list" frame="void" rules="none">
<col class="field-name" />
<col class="field-body" />
<tbody valign="top">
<tr class="field-odd field"><th class="field-name">syntax:</th><td class="field-body"></td>
</tr>
</tbody>
</table>
<div class="highlight-twig notranslate"><div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">UIAlert</span> <span class="p">F</span><span class="nv">orFailure</span> <span class="o">{</span><span class="nv">sTitle</span><span class="s1">:&#39;value&#39;</span><span class="o">,</span> <span class="nv">sContent</span><span class="s1">:&#39;value&#39;</span><span class="o">,</span> <span class="nv">sId</span><span class="s1">:&#39;value&#39;</span><span class="o">}</span> <span class="cp">%}</span><span class="x"></span>
<span class="x"> Content Goes Here</span>
<span class="cp">{%</span> <span class="k">EndUIAlert</span> <span class="cp">%}</span><span class="x"></span>
</pre></div>
</div>
<table class="docutils field-list" frame="void" rules="none">
<col class="field-name" />
<col class="field-body" />
<tbody valign="top">
<tr class="field-odd field"><th class="field-name">parameters:</th><td class="field-body"></td>
</tr>
</tbody>
</table>
<table border="1" class="docutils">
<colgroup>
<col width="12%" />
<col width="10%" />
<col width="12%" />
<col width="7%" />
<col width="59%" />
</colgroup>
<tbody valign="top">
<tr class="row-odd"><td>sTitle</td>
<td>string</td>
<td>optional</td>
<td>‘’</td>
<td>Title of the alert</td>
</tr>
<tr class="row-even"><td>sContent</td>
<td>string</td>
<td>optional</td>
<td>‘’</td>
<td>The raw HTML content, must be already sanitized</td>
</tr>
<tr class="row-odd"><td>sId</td>
<td>string</td>
<td>optional</td>
<td>NULL</td>
<td>id of the html block</td>
</tr>
</tbody>
</table>
</div>
<div class="section" id="alert-withbrandingprimarycolor">
<span id="alertwithbrandingprimarycolor"></span><h3>Alert WithBrandingPrimaryColor<a class="headerlink" href="#alert-withbrandingprimarycolor" title="Permalink to this headline"></a></h3>
<table class="docutils field-list" frame="void" rules="none">
<col class="field-name" />
<col class="field-body" />
<tbody valign="top">
<tr class="field-odd field"><th class="field-name">syntax:</th><td class="field-body"></td>
</tr>
</tbody>
</table>
<div class="highlight-twig notranslate"><div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">UIAlert</span> <span class="p">W</span><span class="nv">ithBrandingPrimaryColor</span> <span class="o">{</span><span class="nv">sTitle</span><span class="s1">:&#39;value&#39;</span><span class="o">,</span> <span class="nv">sContent</span><span class="s1">:&#39;value&#39;</span><span class="o">,</span> <span class="nv">sId</span><span class="s1">:&#39;value&#39;</span><span class="o">}</span> <span class="cp">%}</span><span class="x"></span>
<span class="x"> Content Goes Here</span>
<span class="cp">{%</span> <span class="k">EndUIAlert</span> <span class="cp">%}</span><span class="x"></span>
</pre></div>
</div>
<table class="docutils field-list" frame="void" rules="none">
<col class="field-name" />
<col class="field-body" />
<tbody valign="top">
<tr class="field-odd field"><th class="field-name">parameters:</th><td class="field-body"></td>
</tr>
</tbody>
</table>
<table border="1" class="docutils">
<colgroup>
<col width="12%" />
<col width="10%" />
<col width="12%" />
<col width="7%" />
<col width="59%" />
</colgroup>
<tbody valign="top">
<tr class="row-odd"><td>sTitle</td>
<td>string</td>
<td>optional</td>
<td>‘’</td>
<td>Title of the alert</td>
</tr>
<tr class="row-even"><td>sContent</td>
<td>string</td>
<td>optional</td>
<td>‘’</td>
<td>The raw HTML content, must be already sanitized</td>
</tr>
<tr class="row-odd"><td>sId</td>
<td>string</td>
<td>optional</td>
<td>NULL</td>
<td>id of the html block</td>
</tr>
</tbody>
</table>
</div>
<div class="section" id="alert-withbrandingsecondarycolor">
<span id="alertwithbrandingsecondarycolor"></span><h3>Alert WithBrandingSecondaryColor<a class="headerlink" href="#alert-withbrandingsecondarycolor" title="Permalink to this headline"></a></h3>
<table class="docutils field-list" frame="void" rules="none">
<col class="field-name" />
<col class="field-body" />
<tbody valign="top">
<tr class="field-odd field"><th class="field-name">syntax:</th><td class="field-body"></td>
</tr>
</tbody>
</table>
<div class="highlight-twig notranslate"><div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">UIAlert</span> <span class="p">W</span><span class="nv">ithBrandingSecondaryColor</span> <span class="o">{</span><span class="nv">sTitle</span><span class="s1">:&#39;value&#39;</span><span class="o">,</span> <span class="nv">sContent</span><span class="s1">:&#39;value&#39;</span><span class="o">,</span> <span class="nv">sId</span><span class="s1">:&#39;value&#39;</span><span class="o">}</span> <span class="cp">%}</span><span class="x"></span>
<span class="x"> Content Goes Here</span>
<span class="cp">{%</span> <span class="k">EndUIAlert</span> <span class="cp">%}</span><span class="x"></span>
</pre></div>
</div>
<table class="docutils field-list" frame="void" rules="none">
<col class="field-name" />
<col class="field-body" />
<tbody valign="top">
<tr class="field-odd field"><th class="field-name">parameters:</th><td class="field-body"></td>
</tr>
</tbody>
</table>
<table border="1" class="docutils">
<colgroup>
<col width="12%" />
<col width="10%" />
<col width="12%" />
<col width="7%" />
<col width="59%" />
</colgroup>
<tbody valign="top">
<tr class="row-odd"><td>sTitle</td>
<td>string</td>
<td>optional</td>
<td>‘’</td>
<td>Title of the alert</td>
</tr>
<tr class="row-even"><td>sContent</td>
<td>string</td>
<td>optional</td>
<td>‘’</td>
<td>The raw HTML content, must be already sanitized</td>
</tr>
<tr class="row-odd"><td>sId</td>
<td>string</td>
<td>optional</td>
<td>NULL</td>
<td>id of the html block</td>
</tr>
</tbody>
</table>
</div>
<div class="section" id="alert-common-parameters">
<h3>Alert common parameters<a class="headerlink" href="#alert-common-parameters" title="Permalink to this headline"></a></h3>
<table border="1" class="docutils">
<colgroup>
<col width="26%" />
<col width="9%" />
<col width="65%" />
</colgroup>
<tbody valign="top">
<tr class="row-odd"><td>AddCSSClass</td>
<td>string</td>
<td>CSS class to add to the generated html block</td>
</tr>
<tr class="row-even"><td>AddCSSClasses</td>
<td>array</td>
<td>like &lt;code&gt;[‘ibo-is-hidden’, ‘ibo-alert–body’]&lt;/code&gt;</td>
</tr>
<tr class="row-odd"><td>AddCssFileRelPath</td>
<td>string</td>
<td>&#160;</td>
</tr>
<tr class="row-even"><td>AddDeferredBlock</td>
<td>iUIBlock</td>
<td>&#160;</td>
</tr>
<tr class="row-odd"><td>AddHtml</td>
<td>string</td>
<td>&#160;</td>
</tr>
<tr class="row-even"><td>AddJsFileRelPath</td>
<td>string</td>
<td>&#160;</td>
</tr>
<tr class="row-odd"><td>AddMultipleCssFilesRelPaths</td>
<td>array</td>
<td>&#160;</td>
</tr>
<tr class="row-even"><td>AddMultipleJsFilesRelPaths</td>
<td>array</td>
<td>&#160;</td>
</tr>
<tr class="row-odd"><td>AddSubBlock</td>
<td>iUIBlock</td>
<td>&#160;</td>
</tr>
<tr class="row-even"><td>CSSClasses</td>
<td>array</td>
<td>like &lt;code&gt;[‘ibo-is-hidden’, ‘ibo-alert–body’]&lt;/code&gt;</td>
</tr>
<tr class="row-odd"><td>Color</td>
<td>string</td>
<td>Color of the alert (check CSS classes ibo-is-&lt;color&gt; for colors)</td>
</tr>
<tr class="row-even"><td>Content</td>
<td>string</td>
<td>The raw HTML content, must be already sanitized</td>
</tr>
<tr class="row-odd"><td>DataAttributes</td>
<td>array</td>
<td>Array of data attributes in the format [‘name’ =&gt; ‘value’]</td>
</tr>
<tr class="row-even"><td>DeferredBlocks</td>
<td>array</td>
<td>&#160;</td>
</tr>
<tr class="row-odd"><td>IsClosable</td>
<td>bool</td>
<td>Indicates if the user can remove the alert from the screen</td>
</tr>
<tr class="row-even"><td>IsCollapsible</td>
<td>bool</td>
<td>Indicates if the user can collapse the alert to display only the title</td>
</tr>
<tr class="row-odd"><td>IsHidden</td>
<td>bool</td>
<td>Indicates if the block is hidden by default</td>
</tr>
<tr class="row-even"><td>OpenedByDefault</td>
<td>bool</td>
<td>Indicates if the alert is collapsed or not by default</td>
</tr>
<tr class="row-odd"><td>SubBlocks</td>
<td>array</td>
<td>&#160;</td>
</tr>
<tr class="row-even"><td>Title</td>
<td>string</td>
<td>Title of the alert</td>
</tr>
</tbody>
</table>
<hr class="docutils" />
</div>
</div>
<div class="section" id="examples">
<h2>Examples<a class="headerlink" href="#examples" title="Permalink to this headline"></a></h2>
<p>Example to generate an temporary information with a spinner (on the real display the spinner is animated)</p>
<div class="highlight-twig notranslate"><div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">UIAlert</span> <span class="p">F</span><span class="nv">orInformation</span> <span class="o">{</span><span class="s1">&#39;sId&#39;:&#39;header-requirements&#39;</span><span class="o">,</span> <span class="s1">&#39;IsCollapsible&#39;</span><span class="o">:</span><span class="kp">false</span><span class="o">,</span> <span class="s1">&#39;IsClosable&#39;</span><span class="o">:</span><span class="kp">false</span><span class="o">}</span> <span class="cp">%}</span><span class="x"></span>
<span class="x"> </span><span class="cp">{%</span> <span class="k">UIContentBlock</span> <span class="p">S</span><span class="nv">tandard</span> <span class="o">{</span><span class="s1">&#39;aContainerClasses&#39;</span><span class="o">:[</span><span class="s1">&#39;ibo-update-core-header-requirements&#39;</span><span class="o">],</span>
<span class="s1">&#39;sId&#39;:&#39;can-core-update&#39;</span><span class="o">}</span> <span class="cp">%}</span><span class="x"></span>
<span class="x"> </span><span class="cp">{{</span> <span class="s1">&#39;iTopUpdate:UI:CanCoreUpdate:Loading&#39;</span><span class="o">|</span><span class="nf">dict_s</span> <span class="cp">}}</span><span class="x"></span>
<span class="x"> </span><span class="cp">{%</span> <span class="k">UISpinner</span> <span class="p">S</span><span class="nv">tandard</span> <span class="o">{}</span> <span class="cp">%}</span><span class="x"></span>
<span class="x"> </span><span class="cp">{%</span> <span class="k">EndUIContentBlock</span> <span class="cp">%}</span><span class="x"></span>
<span class="cp">{%</span> <span class="k">EndUIAlert</span> <span class="cp">%}</span><span class="x"></span>
</pre></div>
</div>
<p>The information displayed:</p>
<img alt="../../../_images/AlertInformationExample.png" src="../../../_images/AlertInformationExample.png" />
<p>The javascript to set a success or a failure in return of an ajax call</p>
<div class="highlight-js notranslate"><div class="highlight"><pre><span></span><span class="kd">function</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">oRequirements</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#header-requirements&quot;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">oCanCoreUpdate</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#can-core-update&quot;</span><span class="p">);</span>
<span class="nx">oCanCoreUpdate</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">sMessage</span><span class="p">);</span>
<span class="nx">oRequirements</span><span class="p">.</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">&quot;ibo-is-information&quot;</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">bStatus</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">oRequirements</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">&quot;ibo-is-success&quot;</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">oRequirements</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">&quot;ibo-is-failure&quot;</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
</pre></div>
</div>
<hr class="docutils" />
<p>Example to generate a hidden alert to display using javascript in case of error</p>
<div class="highlight-twig notranslate"><div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">UIAlert</span> <span class="p">F</span><span class="nv">orFailure</span> <span class="o">{</span><span class="nv">sId</span><span class="s2">:&quot;dir_error_outer&quot;</span><span class="o">,</span> <span class="p">I</span><span class="nv">sCollapsible</span><span class="o">:</span><span class="kp">false</span><span class="o">,</span> <span class="p">I</span><span class="nv">sClosable</span><span class="o">:</span><span class="kp">false</span><span class="o">,</span> <span class="p">I</span><span class="nv">sHidden</span><span class="o">:</span><span class="kp">true</span><span class="o">}</span> <span class="cp">%}</span><span class="x"></span>
<span class="x"> *The content goes here*</span>
<span class="cp">{%</span> <span class="k">EndUIAlert</span> <span class="cp">%}</span><span class="x"></span>
</pre></div>
</div>
<p>The javascript to show the alert</p>
<div class="highlight-js notranslate"><div class="highlight"><pre><span></span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#dir_error_outer&quot;</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">&quot;ibo-is-hidden&quot;</span><span class="p">);</span>
</pre></div>
</div>
<p>The error displayed:</p>
<img alt="../../../_images/AlertFailureExample.png" src="../../../_images/AlertFailureExample.png" />
</div>
</div>
</div>
</div>
<footer><div class="rst-footer-buttons" role="navigation" aria-label="Footer">
<a href="../Component.html" class="btn btn-neutral float-left" title="UI Components" accesskey="p" rel="prev"><span class="fa fa-arrow-circle-left" aria-hidden="true"></span> Previous</a>
<a href="../Button/Button.html" class="btn btn-neutral float-right" title="Button" accesskey="n" rel="next">Next <span class="fa fa-arrow-circle-right" aria-hidden="true"></span></a>
</div>
<hr/>
<div role="contentinfo">
<p>&#169; Copyright 2021, Combodo.</p>
</div>
Built with <a href="https://www.sphinx-doc.org/">Sphinx</a> using a
<a href="https://github.com/readthedocs/sphinx_rtd_theme">theme</a>
provided by <a href="https://readthedocs.org">Read the Docs</a>.
</footer>
</div>
</div>
</section>
</div>
<script>
jQuery(function () {
SphinxRtdTheme.Navigation.enable(true);
});
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink