mirror of
https://github.com/Combodo/iTop.git
synced 2026-04-22 10:08:45 +02:00
Doc Twig UI blocks
This commit is contained in:
Eric Espie
@@ -0,0 +1,700 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="writer-html5" lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8" /><meta name="generator" content="Docutils 0.17.1: http://docutils.sourceforge.net/" />
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Alert — iTop UI iTop 3.1.0 documentation</title>
|
||||
<link rel="stylesheet" href="../../../_static/pygments.css" type="text/css" />
|
||||
<link rel="stylesheet" href="../../../_static/css/theme.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 data-url_root="../../../" id="documentation_options" src="../../../_static/documentation_options.js"></script>
|
||||
<script src="../../../_static/jquery.js"></script>
|
||||
<script src="../../../_static/underscore.js"></script>
|
||||
<script src="../../../_static/doctools.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" />
|
||||
</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" role="heading"><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>
|
||||
</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> »</li>
|
||||
<li>Alert</li>
|
||||
<li class="wy-breadcrumbs-aside">
|
||||
</li>
|
||||
</ul>
|
||||
<hr/>
|
||||
</div>
|
||||
<div role="main" class="document" itemscope="itemscope" itemtype="http://schema.org/Article">
|
||||
|
||||
|
||||
<div itemprop="articleBody">
|
||||
|
||||
<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" />
|
||||
<section id="output">
|
||||
<h2>Output<a class="headerlink" href="#output" title="Permalink to this headline"></a></h2>
|
||||
<dl class="field-list simple">
|
||||
<dt class="field-odd">Success Alert</dt>
|
||||
<dd class="field-odd"><p></p></dd>
|
||||
</dl>
|
||||
<img alt="../../../_images/AlertSuccess.png" src="../../../_images/AlertSuccess.png" />
|
||||
<dl class="field-list simple">
|
||||
<dt class="field-odd">Failure Alert</dt>
|
||||
<dd class="field-odd"><p></p></dd>
|
||||
</dl>
|
||||
<img alt="../../../_images/AlertFailure.png" src="../../../_images/AlertFailure.png" />
|
||||
<dl class="field-list simple">
|
||||
<dt class="field-odd">Information Alert</dt>
|
||||
<dd class="field-odd"><p></p></dd>
|
||||
</dl>
|
||||
<img alt="../../../_images/AlertInformation.png" src="../../../_images/AlertInformation.png" />
|
||||
<dl class="field-list simple">
|
||||
<dt class="field-odd">Warning Alert</dt>
|
||||
<dd class="field-odd"><p></p></dd>
|
||||
</dl>
|
||||
<img alt="../../../_images/AlertWarning.png" src="../../../_images/AlertWarning.png" />
|
||||
</section>
|
||||
<hr class="docutils" />
|
||||
<section id="twig-tag">
|
||||
<h2>Twig Tag<a class="headerlink" href="#twig-tag" title="Permalink to this headline"></a></h2>
|
||||
<dl class="field-list simple">
|
||||
<dt class="field-odd">Tag</dt>
|
||||
<dd class="field-odd"><p><strong>UIAlert</strong></p>
|
||||
</dd>
|
||||
<dt class="field-even">Syntax</dt>
|
||||
<dd class="field-even"><p></p></dd>
|
||||
</dl>
|
||||
<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>
|
||||
<dl class="field-list simple">
|
||||
<dt class="field-odd">Type</dt>
|
||||
<dd class="field-odd"><p></p></dd>
|
||||
</dl>
|
||||
<table class="docutils align-default">
|
||||
<colgroup>
|
||||
<col style="width: 57%" />
|
||||
<col style="width: 43%" />
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr class="row-odd"><td><p><a class="reference internal" href="#alertneutral"><span class="std std-ref">Neutral</span></a></p></td>
|
||||
<td><p>Make a basis Alert component</p></td>
|
||||
</tr>
|
||||
<tr class="row-even"><td><p><a class="reference internal" href="#alertforinformation"><span class="std std-ref">ForInformation</span></a></p></td>
|
||||
<td><p>Make an Alert component for informational messages</p></td>
|
||||
</tr>
|
||||
<tr class="row-odd"><td><p><a class="reference internal" href="#alertforsuccess"><span class="std std-ref">ForSuccess</span></a></p></td>
|
||||
<td><p>Make an Alert component for successful messages</p></td>
|
||||
</tr>
|
||||
<tr class="row-even"><td><p><a class="reference internal" href="#alertforwarning"><span class="std std-ref">ForWarning</span></a></p></td>
|
||||
<td><p>Make an Alert component for warning messages</p></td>
|
||||
</tr>
|
||||
<tr class="row-odd"><td><p><a class="reference internal" href="#alertfordanger"><span class="std std-ref">ForDanger</span></a></p></td>
|
||||
<td><p>Make an Alert component for danger messages</p></td>
|
||||
</tr>
|
||||
<tr class="row-even"><td><p><a class="reference internal" href="#alertforfailure"><span class="std std-ref">ForFailure</span></a></p></td>
|
||||
<td><p>Make an Alert component for failure messages</p></td>
|
||||
</tr>
|
||||
<tr class="row-odd"><td><p><a class="reference internal" href="#alertwithbrandingprimarycolor"><span class="std std-ref">WithBrandingPrimaryColor</span></a></p></td>
|
||||
<td><p>Make an Alert component with primary color scheme</p></td>
|
||||
</tr>
|
||||
<tr class="row-even"><td><p><a class="reference internal" href="#alertwithbrandingsecondarycolor"><span class="std std-ref">WithBrandingSecondaryColor</span></a></p></td>
|
||||
<td><p>Make an Alert component with secondary color scheme</p></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<section id="alert-neutral">
|
||||
<span id="alertneutral"></span><h3>Alert Neutral<a class="headerlink" href="#alert-neutral" title="Permalink to this headline"></a></h3>
|
||||
<dl class="field-list simple">
|
||||
<dt class="field-odd">syntax</dt>
|
||||
<dd class="field-odd"><p></p></dd>
|
||||
</dl>
|
||||
<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">:'value'</span><span class="o">,</span> <span class="nv">sContent</span><span class="s1">:'value'</span><span class="o">,</span> <span class="nv">sId</span><span class="s1">:'value'</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>
|
||||
<dl class="field-list simple">
|
||||
<dt class="field-odd">parameters</dt>
|
||||
<dd class="field-odd"><p></p></dd>
|
||||
</dl>
|
||||
<table class="docutils align-default">
|
||||
<colgroup>
|
||||
<col style="width: 12%" />
|
||||
<col style="width: 10%" />
|
||||
<col style="width: 12%" />
|
||||
<col style="width: 7%" />
|
||||
<col style="width: 59%" />
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr class="row-odd"><td><p>sTitle</p></td>
|
||||
<td><p>string</p></td>
|
||||
<td><p>optional</p></td>
|
||||
<td><p>‘’</p></td>
|
||||
<td><p>Title of the alert</p></td>
|
||||
</tr>
|
||||
<tr class="row-even"><td><p>sContent</p></td>
|
||||
<td><p>string</p></td>
|
||||
<td><p>optional</p></td>
|
||||
<td><p>‘’</p></td>
|
||||
<td><p>The raw HTML content, must be already sanitized</p></td>
|
||||
</tr>
|
||||
<tr class="row-odd"><td><p>sId</p></td>
|
||||
<td><p>string</p></td>
|
||||
<td><p>optional</p></td>
|
||||
<td><p>NULL</p></td>
|
||||
<td><p>id of the html block</p></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section id="alert-forinformation">
|
||||
<span id="alertforinformation"></span><h3>Alert ForInformation<a class="headerlink" href="#alert-forinformation" title="Permalink to this headline"></a></h3>
|
||||
<dl class="field-list simple">
|
||||
<dt class="field-odd">syntax</dt>
|
||||
<dd class="field-odd"><p></p></dd>
|
||||
</dl>
|
||||
<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">:'value'</span><span class="o">,</span> <span class="nv">sContent</span><span class="s1">:'value'</span><span class="o">,</span> <span class="nv">sId</span><span class="s1">:'value'</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>
|
||||
<dl class="field-list simple">
|
||||
<dt class="field-odd">parameters</dt>
|
||||
<dd class="field-odd"><p></p></dd>
|
||||
</dl>
|
||||
<table class="docutils align-default">
|
||||
<colgroup>
|
||||
<col style="width: 12%" />
|
||||
<col style="width: 10%" />
|
||||
<col style="width: 12%" />
|
||||
<col style="width: 7%" />
|
||||
<col style="width: 59%" />
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr class="row-odd"><td><p>sTitle</p></td>
|
||||
<td><p>string</p></td>
|
||||
<td><p>optional</p></td>
|
||||
<td><p>‘’</p></td>
|
||||
<td><p>Title of the alert</p></td>
|
||||
</tr>
|
||||
<tr class="row-even"><td><p>sContent</p></td>
|
||||
<td><p>string</p></td>
|
||||
<td><p>optional</p></td>
|
||||
<td><p>‘’</p></td>
|
||||
<td><p>The raw HTML content, must be already sanitized</p></td>
|
||||
</tr>
|
||||
<tr class="row-odd"><td><p>sId</p></td>
|
||||
<td><p>string</p></td>
|
||||
<td><p>optional</p></td>
|
||||
<td><p>NULL</p></td>
|
||||
<td><p>id of the html block</p></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section id="alert-forsuccess">
|
||||
<span id="alertforsuccess"></span><h3>Alert ForSuccess<a class="headerlink" href="#alert-forsuccess" title="Permalink to this headline"></a></h3>
|
||||
<dl class="field-list simple">
|
||||
<dt class="field-odd">syntax</dt>
|
||||
<dd class="field-odd"><p></p></dd>
|
||||
</dl>
|
||||
<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">:'value'</span><span class="o">,</span> <span class="nv">sContent</span><span class="s1">:'value'</span><span class="o">,</span> <span class="nv">sId</span><span class="s1">:'value'</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>
|
||||
<dl class="field-list simple">
|
||||
<dt class="field-odd">parameters</dt>
|
||||
<dd class="field-odd"><p></p></dd>
|
||||
</dl>
|
||||
<table class="docutils align-default">
|
||||
<colgroup>
|
||||
<col style="width: 12%" />
|
||||
<col style="width: 10%" />
|
||||
<col style="width: 12%" />
|
||||
<col style="width: 7%" />
|
||||
<col style="width: 59%" />
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr class="row-odd"><td><p>sTitle</p></td>
|
||||
<td><p>string</p></td>
|
||||
<td><p>optional</p></td>
|
||||
<td><p>‘’</p></td>
|
||||
<td><p>Title of the alert</p></td>
|
||||
</tr>
|
||||
<tr class="row-even"><td><p>sContent</p></td>
|
||||
<td><p>string</p></td>
|
||||
<td><p>optional</p></td>
|
||||
<td><p>‘’</p></td>
|
||||
<td><p>The raw HTML content, must be already sanitized</p></td>
|
||||
</tr>
|
||||
<tr class="row-odd"><td><p>sId</p></td>
|
||||
<td><p>string</p></td>
|
||||
<td><p>optional</p></td>
|
||||
<td><p>NULL</p></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section id="alert-forwarning">
|
||||
<span id="alertforwarning"></span><h3>Alert ForWarning<a class="headerlink" href="#alert-forwarning" title="Permalink to this headline"></a></h3>
|
||||
<dl class="field-list simple">
|
||||
<dt class="field-odd">syntax</dt>
|
||||
<dd class="field-odd"><p></p></dd>
|
||||
</dl>
|
||||
<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">:'value'</span><span class="o">,</span> <span class="nv">sContent</span><span class="s1">:'value'</span><span class="o">,</span> <span class="nv">sId</span><span class="s1">:'value'</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>
|
||||
<dl class="field-list simple">
|
||||
<dt class="field-odd">parameters</dt>
|
||||
<dd class="field-odd"><p></p></dd>
|
||||
</dl>
|
||||
<table class="docutils align-default">
|
||||
<colgroup>
|
||||
<col style="width: 12%" />
|
||||
<col style="width: 10%" />
|
||||
<col style="width: 12%" />
|
||||
<col style="width: 7%" />
|
||||
<col style="width: 59%" />
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr class="row-odd"><td><p>sTitle</p></td>
|
||||
<td><p>string</p></td>
|
||||
<td><p>optional</p></td>
|
||||
<td><p>‘’</p></td>
|
||||
<td><p>Title of the alert</p></td>
|
||||
</tr>
|
||||
<tr class="row-even"><td><p>sContent</p></td>
|
||||
<td><p>string</p></td>
|
||||
<td><p>optional</p></td>
|
||||
<td><p>‘’</p></td>
|
||||
<td><p>The raw HTML content, must be already sanitized</p></td>
|
||||
</tr>
|
||||
<tr class="row-odd"><td><p>sId</p></td>
|
||||
<td><p>string</p></td>
|
||||
<td><p>optional</p></td>
|
||||
<td><p>NULL</p></td>
|
||||
<td><p>id of the html block</p></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section id="alert-fordanger">
|
||||
<span id="alertfordanger"></span><h3>Alert ForDanger<a class="headerlink" href="#alert-fordanger" title="Permalink to this headline"></a></h3>
|
||||
<dl class="field-list simple">
|
||||
<dt class="field-odd">syntax</dt>
|
||||
<dd class="field-odd"><p></p></dd>
|
||||
</dl>
|
||||
<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">:'value'</span><span class="o">,</span> <span class="nv">sContent</span><span class="s1">:'value'</span><span class="o">,</span> <span class="nv">sId</span><span class="s1">:'value'</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>
|
||||
<dl class="field-list simple">
|
||||
<dt class="field-odd">parameters</dt>
|
||||
<dd class="field-odd"><p></p></dd>
|
||||
</dl>
|
||||
<table class="docutils align-default">
|
||||
<colgroup>
|
||||
<col style="width: 12%" />
|
||||
<col style="width: 10%" />
|
||||
<col style="width: 12%" />
|
||||
<col style="width: 7%" />
|
||||
<col style="width: 59%" />
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr class="row-odd"><td><p>sTitle</p></td>
|
||||
<td><p>string</p></td>
|
||||
<td><p>optional</p></td>
|
||||
<td><p>‘’</p></td>
|
||||
<td><p>Title of the alert</p></td>
|
||||
</tr>
|
||||
<tr class="row-even"><td><p>sContent</p></td>
|
||||
<td><p>string</p></td>
|
||||
<td><p>optional</p></td>
|
||||
<td><p>‘’</p></td>
|
||||
<td><p>The raw HTML content, must be already sanitized</p></td>
|
||||
</tr>
|
||||
<tr class="row-odd"><td><p>sId</p></td>
|
||||
<td><p>string</p></td>
|
||||
<td><p>optional</p></td>
|
||||
<td><p>NULL</p></td>
|
||||
<td><p>id of the html block</p></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section id="alert-forfailure">
|
||||
<span id="alertforfailure"></span><h3>Alert ForFailure<a class="headerlink" href="#alert-forfailure" title="Permalink to this headline"></a></h3>
|
||||
<dl class="field-list simple">
|
||||
<dt class="field-odd">syntax</dt>
|
||||
<dd class="field-odd"><p></p></dd>
|
||||
</dl>
|
||||
<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">:'value'</span><span class="o">,</span> <span class="nv">sContent</span><span class="s1">:'value'</span><span class="o">,</span> <span class="nv">sId</span><span class="s1">:'value'</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>
|
||||
<dl class="field-list simple">
|
||||
<dt class="field-odd">parameters</dt>
|
||||
<dd class="field-odd"><p></p></dd>
|
||||
</dl>
|
||||
<table class="docutils align-default">
|
||||
<colgroup>
|
||||
<col style="width: 12%" />
|
||||
<col style="width: 10%" />
|
||||
<col style="width: 12%" />
|
||||
<col style="width: 7%" />
|
||||
<col style="width: 59%" />
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr class="row-odd"><td><p>sTitle</p></td>
|
||||
<td><p>string</p></td>
|
||||
<td><p>optional</p></td>
|
||||
<td><p>‘’</p></td>
|
||||
<td><p>Title of the alert</p></td>
|
||||
</tr>
|
||||
<tr class="row-even"><td><p>sContent</p></td>
|
||||
<td><p>string</p></td>
|
||||
<td><p>optional</p></td>
|
||||
<td><p>‘’</p></td>
|
||||
<td><p>The raw HTML content, must be already sanitized</p></td>
|
||||
</tr>
|
||||
<tr class="row-odd"><td><p>sId</p></td>
|
||||
<td><p>string</p></td>
|
||||
<td><p>optional</p></td>
|
||||
<td><p>NULL</p></td>
|
||||
<td><p>id of the html block</p></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section id="alert-withbrandingprimarycolor">
|
||||
<span id="alertwithbrandingprimarycolor"></span><h3>Alert WithBrandingPrimaryColor<a class="headerlink" href="#alert-withbrandingprimarycolor" title="Permalink to this headline"></a></h3>
|
||||
<dl class="field-list simple">
|
||||
<dt class="field-odd">syntax</dt>
|
||||
<dd class="field-odd"><p></p></dd>
|
||||
</dl>
|
||||
<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">:'value'</span><span class="o">,</span> <span class="nv">sContent</span><span class="s1">:'value'</span><span class="o">,</span> <span class="nv">sId</span><span class="s1">:'value'</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>
|
||||
<dl class="field-list simple">
|
||||
<dt class="field-odd">parameters</dt>
|
||||
<dd class="field-odd"><p></p></dd>
|
||||
</dl>
|
||||
<table class="docutils align-default">
|
||||
<colgroup>
|
||||
<col style="width: 12%" />
|
||||
<col style="width: 10%" />
|
||||
<col style="width: 12%" />
|
||||
<col style="width: 7%" />
|
||||
<col style="width: 59%" />
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr class="row-odd"><td><p>sTitle</p></td>
|
||||
<td><p>string</p></td>
|
||||
<td><p>optional</p></td>
|
||||
<td><p>‘’</p></td>
|
||||
<td><p>Title of the alert</p></td>
|
||||
</tr>
|
||||
<tr class="row-even"><td><p>sContent</p></td>
|
||||
<td><p>string</p></td>
|
||||
<td><p>optional</p></td>
|
||||
<td><p>‘’</p></td>
|
||||
<td><p>The raw HTML content, must be already sanitized</p></td>
|
||||
</tr>
|
||||
<tr class="row-odd"><td><p>sId</p></td>
|
||||
<td><p>string</p></td>
|
||||
<td><p>optional</p></td>
|
||||
<td><p>NULL</p></td>
|
||||
<td><p>id of the html block</p></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section id="alert-withbrandingsecondarycolor">
|
||||
<span id="alertwithbrandingsecondarycolor"></span><h3>Alert WithBrandingSecondaryColor<a class="headerlink" href="#alert-withbrandingsecondarycolor" title="Permalink to this headline"></a></h3>
|
||||
<dl class="field-list simple">
|
||||
<dt class="field-odd">syntax</dt>
|
||||
<dd class="field-odd"><p></p></dd>
|
||||
</dl>
|
||||
<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">:'value'</span><span class="o">,</span> <span class="nv">sContent</span><span class="s1">:'value'</span><span class="o">,</span> <span class="nv">sId</span><span class="s1">:'value'</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>
|
||||
<dl class="field-list simple">
|
||||
<dt class="field-odd">parameters</dt>
|
||||
<dd class="field-odd"><p></p></dd>
|
||||
</dl>
|
||||
<table class="docutils align-default">
|
||||
<colgroup>
|
||||
<col style="width: 12%" />
|
||||
<col style="width: 10%" />
|
||||
<col style="width: 12%" />
|
||||
<col style="width: 7%" />
|
||||
<col style="width: 59%" />
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr class="row-odd"><td><p>sTitle</p></td>
|
||||
<td><p>string</p></td>
|
||||
<td><p>optional</p></td>
|
||||
<td><p>‘’</p></td>
|
||||
<td><p>Title of the alert</p></td>
|
||||
</tr>
|
||||
<tr class="row-even"><td><p>sContent</p></td>
|
||||
<td><p>string</p></td>
|
||||
<td><p>optional</p></td>
|
||||
<td><p>‘’</p></td>
|
||||
<td><p>The raw HTML content, must be already sanitized</p></td>
|
||||
</tr>
|
||||
<tr class="row-odd"><td><p>sId</p></td>
|
||||
<td><p>string</p></td>
|
||||
<td><p>optional</p></td>
|
||||
<td><p>NULL</p></td>
|
||||
<td><p>id of the html block</p></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section id="alert-common-parameters">
|
||||
<h3>Alert common parameters<a class="headerlink" href="#alert-common-parameters" title="Permalink to this headline"></a></h3>
|
||||
<table class="docutils align-default">
|
||||
<colgroup>
|
||||
<col style="width: 26%" />
|
||||
<col style="width: 9%" />
|
||||
<col style="width: 65%" />
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr class="row-odd"><td><p>AddCSSClass</p></td>
|
||||
<td><p>string</p></td>
|
||||
<td><p>CSS class to add to the generated html block</p></td>
|
||||
</tr>
|
||||
<tr class="row-even"><td><p>AddCSSClasses</p></td>
|
||||
<td><p>array</p></td>
|
||||
<td><p>like <code>[‘ibo-is-hidden’, ‘ibo-alert–body’]</code></p></td>
|
||||
</tr>
|
||||
<tr class="row-odd"><td><p>AddCssFileRelPath</p></td>
|
||||
<td><p>string</p></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr class="row-even"><td><p>AddDeferredBlock</p></td>
|
||||
<td><p>iUIBlock</p></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr class="row-odd"><td><p>AddHtml</p></td>
|
||||
<td><p>string</p></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr class="row-even"><td><p>AddJsFileRelPath</p></td>
|
||||
<td><p>string</p></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr class="row-odd"><td><p>AddMultipleCssFilesRelPaths</p></td>
|
||||
<td><p>array</p></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr class="row-even"><td><p>AddMultipleJsFilesRelPaths</p></td>
|
||||
<td><p>array</p></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr class="row-odd"><td><p>AddSubBlock</p></td>
|
||||
<td><p>iUIBlock</p></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr class="row-even"><td><p>CSSClasses</p></td>
|
||||
<td><p>array</p></td>
|
||||
<td><p>like <code>[‘ibo-is-hidden’, ‘ibo-alert–body’]</code></p></td>
|
||||
</tr>
|
||||
<tr class="row-odd"><td><p>Color</p></td>
|
||||
<td><p>string</p></td>
|
||||
<td><p>Color of the alert (check CSS classes ibo-is-<color> for colors)</p></td>
|
||||
</tr>
|
||||
<tr class="row-even"><td><p>Content</p></td>
|
||||
<td><p>string</p></td>
|
||||
<td><p>The raw HTML content, must be already sanitized</p></td>
|
||||
</tr>
|
||||
<tr class="row-odd"><td><p>DataAttributes</p></td>
|
||||
<td><p>array</p></td>
|
||||
<td><p>Array of data attributes in the format [‘name’ => ‘value’]</p></td>
|
||||
</tr>
|
||||
<tr class="row-even"><td><p>DeferredBlocks</p></td>
|
||||
<td><p>array</p></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr class="row-odd"><td><p>HasForcedDiv</p></td>
|
||||
<td><p>bool</p></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr class="row-even"><td><p>IsClosable</p></td>
|
||||
<td><p>bool</p></td>
|
||||
<td><p>Indicates if the user can remove the alert from the screen</p></td>
|
||||
</tr>
|
||||
<tr class="row-odd"><td><p>IsCollapsible</p></td>
|
||||
<td><p>bool</p></td>
|
||||
<td><p>Indicates if the user can collapse the alert to display only the title</p></td>
|
||||
</tr>
|
||||
<tr class="row-even"><td><p>IsHidden</p></td>
|
||||
<td><p>bool</p></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr class="row-odd"><td><p>OpenedByDefault</p></td>
|
||||
<td><p>bool</p></td>
|
||||
<td><p>Indicates if the alert is collapsed or not by default</p></td>
|
||||
</tr>
|
||||
<tr class="row-even"><td><p>SubBlocks</p></td>
|
||||
<td><p>array</p></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr class="row-odd"><td><p>Title</p></td>
|
||||
<td><p>string</p></td>
|
||||
<td><p>Title of the alert</p></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr class="docutils" />
|
||||
</section>
|
||||
</section>
|
||||
<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">'sId':'header-requirements'</span><span class="o">,</span> <span class="s1">'IsCollapsible'</span><span class="o">:</span><span class="kp">false</span><span class="o">,</span> <span class="s1">'IsClosable'</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">'aContainerClasses'</span><span class="o">:[</span><span class="s1">'ibo-update-core-header-requirements'</span><span class="o">],</span>
|
||||
<span class="s1">'sId':'can-core-update'</span><span class="o">}</span> <span class="cp">%}</span><span class="x"></span>
|
||||
<span class="x"> </span><span class="cp">{{</span> <span class="s1">'iTopUpdate:UI:CanCoreUpdate:Loading'</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">"#header-requirements"</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">"#can-core-update"</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">"ibo-is-information"</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">"ibo-is-success"</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">"ibo-is-failure"</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">:"dir_error_outer"</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">"#dir_error_outer"</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">"ibo-is-hidden"</span><span class="p">);</span>
|
||||
</pre></div>
|
||||
</div>
|
||||
<p>The error displayed:</p>
|
||||
<img alt="../../../_images/AlertFailureExample.png" src="../../../_images/AlertFailureExample.png" />
|
||||
</section>
|
||||
</section>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
|
||||
<hr/>
|
||||
|
||||
<div role="contentinfo">
|
||||
<p>© Copyright 2022, 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>
|
||||
|
||||
<!--
|
||||
~ @copyright Copyright (C) 2010-2022 Combodo SARL
|
||||
~ @license http://opensource.org/licenses/AGPL-3.0
|
||||
-->
|
||||
|
||||
<div class="rst-versions" data-toggle="rst-versions" role="note" aria-label="versions">
|
||||
<span class="rst-current-version" data-toggle="rst-current-version">
|
||||
<span class="fa fa-book"> Other Versions</span>
|
||||
v: documentation/3.0
|
||||
<span class="fa fa-caret-down"></span>
|
||||
</span>
|
||||
<div class="rst-other-versions">
|
||||
<dl>
|
||||
<dt>Branches</dt>
|
||||
<dd><a href="Alert.html">documentation/3.0</a></dd>
|
||||
<dd><a href="../../../../latest/generated/Component/Alert/Alert.html">documentation/latest</a></dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div><script>
|
||||
jQuery(function () {
|
||||
SphinxRtdTheme.Navigation.enable(true);
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user