17 févr. 2022 16:38:57 avatar
Home Edit History fr en

Lutece v6 : Macros Freemarker pour le back-office

Introduction

En vue de faciliter la migration des templates en cas de changement de framework ou de version de framework CSS, de nouvelles macros ont été développées pour le back-office. Celles-ci visent notamment à faciliter le passage à Bootstrap 4 dans les mois à venir. Les nouvelles macros ont également pour but de permettre plus de modularité dans leur utilisation.

Les anciennes macros (< v5)

Les macros suivantes existent toujours dans commons.html pour assurer la transition entre les anciennes et les nouvelles macros, mais devront être remplacées progressivement au fur et à mesure de la migration :

  • comboWithParams (remplacée par select)
  • comboSortedWithParams (remplacée par select)
  • comboWithParamsAndLength (remplacée par select)
  • combo (remplacée par select)
  • fieldInputText (remplacée par formGroup + input)
  • fieldInputPassword (remplacée par formGroup + input)
  • fieldTextArea (remplacée par formGroup + input)
  • fieldInputWrapper (remplacée par formGroup)
  • fieldStaticText (remplacée par formGroup + staticText)
  • fieldInputCalendar (remplacée par formGroup + inputGroup + inputGroupItem)
  • fieldInputCheckBox (remplacée par formGroup + checkBox)
  • fieldInputRadioBox (remplacée par formGroup + radioButton)
  • fieldInputCheckBoxInline (remplacée par formGroup + checkBox)
  • fieldInputRadioBoxInline (remplacée par formGroup + radioButton)
  • fieldInputCombo (remplacée par formGroup + select)
  • boxSized (remplacée par box)
  • rowBox (remplacée par row + columns + box)
  • rowBoxHeader (remplacée par boxHeader)
  • headerButtons (remplacée par la saisie de paramètres dans boxHeader)
  • table (réécrite)
  • td (réécrite)

Les macros suivantes restent pour le moment inchangées :

  • radioImageList
  • checkboxList
  • sort
  • pagination
  • paginationAdmin
  • paginationPageLinks
  • paginationCombo
  • paginationItemCount
  • item_navigation
  • dataTable
  • filterPanel
  • messages
  • tableHeadBodySeparator

Les macros réécrites

Boutons

  • actionButtons : réécrite pour utiliser les nouvelles macros

Les nouvelles macros

Lignes et colonnes

row

Pour créer une nouvelle ligne qui contiendra les colonnes. Les marges négatives du composant row (-15px à gauche et à droite) permettent de conserver l'alignement.

Rendu HTML : 

<div class="row"></div>

Appel de la macro : 

<@row></@row>

Macro : 

<#macro row class='' id='' params=''>
	<div class="row<#if class!=''> ${class}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
		<#nested>
	</div>
</#macro>

Paramètres :

  • class (string)
  • id (string)
  • params (permet d'ajouter d'autres attributs)
columns

Le système de 12 colonnes de Bootstrap permet de répartir son contenu et de le rendre responsive (voir la documentation de Bootstrap). Les colonnes sont contenues dans un row.

Rendu HTML : 

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
	<p>Your content here...</p>
</div>

Appel de la macro : 

<@columns>
	<p>Your content here...</p>
</@columns>

Macro : 

<#macro columns offsetXs=0 offsetSm=0 offsetMd=0 offsetLg=0 offsetXl=0 pushXs=0 pushSm=0 pushMd=0 pushLg=0 pushXl=0 pullXs=0 pullSm=0 pullMd=0 pullLg=0 pullXl=0 xs=12 sm=0 md=0 lg=0 xl=0 id='' class='' params=''>
	<div class="col-xs-${xs}<#if sm!=0> col-sm-${sm}</#if><#if md!=0> col-md-${md}</#if><#if lg!=0> col-lg-${lg}</#if><#if xl!=0> col-xl-${xl}</#if><#if offsetXs!=0> col-xs-offset-${offsetXs}</#if><#if offsetSm!=0> col-sm-offset-${offsetSm}</#if><#if offsetMd!=0> col-md-offset-${offsetMd}</#if><#if offsetLg!=0> col-lg-offset-${offsetLg}</#if><#if offsetXl!=0> col-xl-offset-${offsetXl}</#if><#if pushXs!=0> col-xs-push-${pushXs}</#if><#if pushSm!=0> col-sm-push-${pushSm}</#if><#if pushMd!=0> col-md-push-${pushMd}</#if><#if pushLg!=0> col-lg-push-${pushLg}</#if><#if pushXl!=0> col-xl-push-${pushXl}</#if><#if pullXs!=0> col-xs-pull-${pullXs}</#if><#if pullSm!=0> col-sm-pull-${pullSm}</#if><#if pullMd!=0> col-md-pull-${pullMd}</#if><#if pullLg!=0> col-lg-pull-${pullLg}</#if><#if pullXl!=0> col-xl-pull-${pullXl}</#if><#if class!=''> ${class}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
		<#nested>
	</div>
</#macro>

Paramètres :

  • xs (int) : nombre de colonnes à afficher (mobile). Par défaut 12
  • sm (int) : nombre de colonnes à afficher (tablette). Par défaut 0
  • md (int) : nombre de colonnes à afficher (tablette/petit écran desktop). Par défaut 0
  • lg (int) : nombre de colonnes à afficher (grand écran desktop). Par défaut 0
  • xl (int) : nombre de colonnes à afficher (très grand écran desktop). Par défaut 0
  • offsetXs, offsetSm, offsetMd, offsetLg, offsetXl (int) : spécifie le décalage de l'élément sur la grille
  • pushXs, pushSm, pushMd, pushLg, pushXl, pullXs, pullSm, pullMd, pullLg, pullXl (int) : réarrange l'ordre des colonnes (voir : Reorder CSS Columns Using Bootstrap)
  • id (string)
  • class (string)
  • params (permet d'ajouter d'autres attributs)

Tableaux

table

HTML : 

<div class="table-responsive">
	<table>
		<tr>
			<td>Your text here...</td>
		</tr>
	</table>
</div>

Appel de la macro : 

<@table>
	<tr>
		<td>Your text here...</td>
	</tr>
</@table>

Macro : 

<#macro table responsive=true class='' id='' params=''>
	<#if responsive>
	<div class="table-responsive">
	</#if>
	<table class="table table-hover table-condensed<#if class!=''> ${class}</#if>" id="${id}"<#if params!=''> ${params}</#if>>
			<#nested>
		</table>
	<#if responsive>
	</div>
	</#if>
</#macro>

Paramètres :

  • responsive (boolean)
  • class (string) : pour des classes supplémentaires ex : 'table-striped', 'table-bordered'. Les classes 'table-hover' et 'table-condensed' sont incluses par défaut.
  • id (string)
  • params (permet d'ajouter d'autres attributs)
td

HTML : 

<td></td>

Appel de la macro : 

<@td></@td>

Macro : 

<#macro td xs=0 sm=0 md=0 lg=0 xl=0 class='' id='' params=''>
	<td class="<#if xs!=0>col-xs-${xs}</#if><#if sm!=0> col-sm-${sm}</#if><#if md!=0> col-md-${md}</#if><#if lg!=0> col-lg-${lg}</#if><#if xl!=0> col-xl-${xl}</#if><#if class!=''>${class}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
		<#nested>
	</td>
</#macro>

Paramètres :

  • xs (int)
  • sm (int)
  • md (int)
  • lg (int)
  • xl (int)
  • class (string)
  • id (string)
  • params (permet d'ajouter d'autres attributs)

Formulaires

tform

Rendu HTML : 

<form class="form-horizontal" method="post" role="form">
	...
</form>

Appel de la macro : 

<@tform>
	...
</@tform>

Macro : 

<#macro tform class='form-horizontal' class2='' action='' method='post' name='' id='' role='form' params=''>
	<form class="${class}<#if class2!=''> ${class2}</#if>"<#if id!=''> id="${id}"</#if><#if action!=''> action="${action}"</#if><#if method!=''> method="${method}"</#if><#if name!=''> name="${name}"</#if><#if role!=''> role="${role}"</#if><#if params!=''> ${params}</#if>>
		<#nested>
	</form>
</#macro>

Paramètres :

  • class2 (string) : 'form-inline', 'navbar-form', 'navbar-left', 'search-form'...
  • action (string)
  • method (string) : par défaut 'post'
  • name (string)
  • id (string)
  • role (string) : par défaut 'form'
  • params (string) : (permet d'ajouter d'autres attributs)
Composants de formulaires
formGroup

Rendu HTML : 

<div class="form-group">
	...
</div>

Appel de la macro : 

<@formGroup>
	...
</@formGroup>

Macro : 

<#macro formGroup formStyle='horizontal' class='' groupStyle='' rows=1 labelKey='' labelFor='' labelId='' helpKey='' id='' mandatory=false showLabel=true params=''>
	<div class="form-group<#if groupStyle!=''> has-${groupStyle} has-feedback</#if><#if class!=''> ${class}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
		<#if rows=1>
			<#if labelKey!='' && formStyle='horizontal'>
				<#assign labelClass = "col-xs-12 col-sm-3 control-label">
				<#assign divClass = "col-xs-12 col-sm-9 col-md-6 col-lg-6">
			<#elseif formStyle = 'inline'>
				<#assign labelClass = ''>
			<#else>
				<#assign divClass="col-xs-12 col-sm-offset-3 col-sm-6">
			</#if>
		<#else>
			<#assign labelClass = "col-xs-12">
			<#assign divClass = "col-xs-12">
		</#if>
		<#if labelKey!=''>
		<label class="${labelClass}<#if showLabel=false> sr-only</#if>" for="${labelFor}"<#if labelId!=''> id="${labelId}"</#if>>
			${labelKey}
			<#if mandatory=false>
				&#160;
			<#elseif mandatory=true>
				&#160;<@icon style='asterisk' />
			</#if>
		</label>
		</#if>
		<#if formStyle="horizontal">
		<div class="${divClass}">
		</#if>
			<#assign mandatory = mandatory>
			<#assign labelFor = labelFor>
			<#assign helpKey = helpKey>
			<#nested>
			<#if class='success'>
				<@icon style='check' class='form-control-feedback' />
			<#elseif class='warning'>
				<@icon style='warning' class='form-control-feedback' />
			<#elseif class='error'>
				<@icon style='close' class='form-control-feedback' />
			</#if>
			<#if helpKey!='' && formStyle!='inline'><span class="help-block" <#if labelFor!=''>id="${labelFor}_help"</#if>>${helpKey}</span></#if>
		<#if formStyle="horizontal">
		</div>
		</#if>
	</div>
</#macro>

Paramètres :

  • formStyle (string) : Le style du formulaire, selon les spécifications de Bootstrap. Options possibles : '', 'inline', 'horizontal', 'navbar-form', 'navbar-left'... L'option par défaut est 'horizontal'
  • class (string) : Classe additionnelle
  • groupStyle : Classe facultative pour signaler les erreurs ou avertissements sur les champs du formulaire. Options possibles : 'success', 'warning', 'error'
  • rows (int) : Ce paramètre définit si le label et le champ qui lui est associé sont sur la même ligne (valeur : 1) ou sur deux lignes différentes (valeur : 2). Par défaut la valeur est à 1, et ce réglage correspond à la plupart des formulaires du back office.
  • labelKey (string) : Label du champ de formulaire contenu dans le groupe
  • labelFor (string) : Valeur de l'attribut "for" du label servant à lier le label à un élément du formulaire
  • labelId (string) : Ajoute un ID sur le label du champ
  • helpKey (string) : Texte d'aide du champ de formulaire
  • id (string)
  • mandatory (boolean) : Définit si le champ du formulaire est obligatoire (true/false)
  • showLabel (boolean) : Permet de choisir si le label sera visible ou pas. S'il est caché, celui-ci sera tout de même lisible par les lecteurs d'écran
  • params (string) : (permet d'ajouter d'autres attributs)
input

Cette macro permet d'appeler tous types d'input texte, et fichier. Le type est défini par un simple argument. Les inputs doivent être contenus par un formGroup.

HTML : 

<textarea></textarea>
<input type="text" class="form-control" />
<input type="password" class="form-control" />
<input type="email" class="form-control" />
<input type="file" class="form-control" />
<input type="search" class="form-control" />
<input type="number" class="form-control" />

Appel de la macro :

<@input type='textarea' />
<@input type='text' />
<@input type='password />
<@input type='email' />
<@input type='file' />
<@input type='search' />
<@input type='number' />

Macro : 

<#macro input name type='text' value='' class='' size='' inputSize=0 maxlength=0 placeHolder='' rows=4 cols=40 richtext=false tabIndex='' id='' mandatory=mandatory disabled=false readonly=false pattern='' params='' title='' min=0 max=0>
	<#if type='textarea'>
		<textarea name="${name}" class="form-control<#if size!=''> input-${size}</#if><#if class!=''> ${class}</#if><#if richtext> richtext</#if>" rows="${rows}" cols="${cols}"<#if tabIndex!=''> tabindex="${tabIndex}"</#if><#if placeHolder!=''> placeholder="${placeHolder}"</#if><#if title!=''> title="${title}"</#if><#if disabled> disabled</#if><#if readonly> readonly</#if><#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if><#if pattern!=''>pattern=${pattern}</#if><#if mandatory && !richtext> required</#if><#if labelFor!='' && helpKey!=''> aria-describedby="${labelFor}_help"</#if>><#nested></textarea>
	<#elseif type='text' || type='search' || type='password' || type='email' || type='file' || type='number'>
	<input class="form-control<#if size!=''> input-${size}</#if><#if class!=''> ${class}</#if> " id="${id}" name="${name}" type="${type}" value="${value}"<#if tabIndex!=''> tabindex="${tabIndex}"</#if><#if placeHolder!=''> placeholder="${placeHolder}"</#if><#if title!=''> title="${title}"</#if><#if maxlength &gt; 0> maxlength="${maxlength}"</#if><#if inputSize!=0> size="${inputSize}"</#if><#if disabled> disabled</#if><#if readonly> readonly</#if><#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if><#if pattern!=''>pattern=${pattern}</#if><#if min!=0> min="${min}"</#if><#if max!=0> max="${max}"</#if><#if mandatory> required</#if><#if labelFor!='' && helpKey!=''> aria-describedby="${labelFor}_help"</#if> />
	<#else><@icon style='warning' />Type not supported
	</#if>
</#macro>

Paramètres :

  • type (string) : 'text', 'textarea', 'text', 'search', 'password', 'email', 'file', 'number'. La valeur par défaut est 'text'
  • value (string)
  • class (string)
  • size (string) : classe Bootstrap déterminant la taille du texte et du champ. Valeurs possibles : 'sm', 'lg'
  • inputSize (int) : l'attribut size html
  • maxlength (int)
  • placeHolder (string)
  • rows (int) : uniquement pour textarea
  • cols (int) : uniquement pour textarea
  • richtext (boolean) : active l'option de texte enrichi, uniquement pour textarea
  • tabIndex (string)
  • id (string)
  • mandatory (boolean) : hérité du contenant formGroup
  • disabled (boolean)
  • readonly (boolean)
  • pattern : [A-F][0-9]{5}
  • params (string)
  • title (string)
  • min (int) : paramètre compatible avec input type='number'
  • max (int) : paramètre compatible avec input type='number'
checkBox

HTML (checkbox vertical) : 

<div class="checkbox">
	<label>
		<input type="checkbox" />
		Label
	</label>
</div>

Appel de la macro : 

<@checkBox labelKey='Label' />

HTML (checkbox horizontal) : 

<label class="checkbox-inline">
	<input type="checkbox" />
	Label
</label>

Appel de la macro : 

<@checkBox orientation='horizontal' labelKey='Label' />

Macro : 

<#macro checkBox name id='' labelKey='' labelFor='' orientation='vertical' value='' tabIndex='' title='' disabled=false readonly=false checked=false mandatory=mandatory params=''>
	<#if orientation='vertical'>
	<div class="checkbox">
	</#if>
	<label<#if orientation='horizontal'> class="checkbox-inline"</#if><#if labelFor!=''> for="${labelFor}"</#if>>
	<input type="checkbox" id="${id}" name="${name}"<#if value!=''> value="${value}"</#if><#if tabIndex!=''> tabindex="${tabIndex}"</#if><#if checked> checked</#if><#if disabled> disabled</#if><#if readonly> readonly</#if><#if params!=''> ${params}</#if> />
		<#if labelKey!=''>
			${labelKey}
		<#else>
			&#160;
		</#if>
	</label>
	<#if orientation='vertical'></div></#if>
</#macro>

Paramètres :

  • name (obligatoire)
  • id (string)
  • labelKey (string) : label de la case à cocher
  • labelFor (string) : valeur de l'attribut "for" du label, servant à lier le label à un élément du formulaire
  • orientation (string) : la valeur par défaut est 'vertical'
  • value (string)
  • tabIndex (string)
  • title (string)
  • disabled (boolean)
  • readonly (boolean)
  • checked (boolean)
  • mandatory (boolean) : hérité du contenant formGroup
  • params (string) : (permet d'ajouter d'autres attributs)
radioButton

HTML (radio vertical) : 

<div class="radio">
	<label>
		<input type="radio" />
		Label
	</label>
</div>

Appel de la macro (radio vertical) : 

<@radioButton labelKey='Label' />

HTML (radio horizontal) : 

<label class="radio-inline">
	<input type="radio" />
	Label
</label>

Appel de la macro (radio horizontal) : 

<@radioButton orientation='horizontal' labelKey='Label' />

Macro : 

<#macro radioButton name id='' value='' labelKey='' labelFor='' orientation='vertical' tabIndex='' title='' disabled=false readonly=false checked=false mandatory=mandatory params=''>
	<#if orientation='vertical'>
		<div class="radio">
	</#if>
			<label<#if orientation='horizontal'> class="radio-inline"</#if>>
				<input type="radio" id="${id}" name="${name}"<#if value!=''> value="${value}"</#if><#if tabIndex!=''> tabindex="${tabIndex}"</#if><#if checked> checked</#if><#if disabled> disabled</#if><#if readonly> readonly</#if><#if mandatory> required</#if><#if params!=''> ${params}</#if> />
			<#if labelKey!=''>
					${labelKey}
			<#else>
					&#160;
			</#if>
			</label>
<#if orientation='vertical'></div></#if>
</#macro>

Paramètres :

  • name (obligatoire)
  • id (string)
  • labelKey (string) : label du bouton radio
  • labelFor (string) : valeur de l'attribut "for" du label, servant à lier le label au bouton radio
  • orientation (string) : la valeur par défaut est 'vertical'
  • value (string)
  • tabIndex (string)
  • title (string)
  • disabled (boolean)
  • readonly (boolean)
  • checked (boolean)
  • mandatory (boolean) : hérité du contenant formGroup
  • params (string) : (permet d'ajouter d'autres attributs)
select

Rendu HTML : 

<select name='list'>
	...
</select>

Appel de la macro : 

<@select name='list' />

Macro : 

<#macro select name items='' default_value=0 id=name size='' sort=false multiple=0 params='' title=''>
	<select id="${id}" name="${name}" class="form-control<#if size!=''> input-${size}</#if>" <#if (multiple &gt; 0)>multiple size="${multiple}"</#if><#if params!=''> ${params}</#if><#if title!=''> ${title}</#if>>
	<#if items?has_content>
		<#if sort=true>
			<#list items?sort_by("name") as item>
			<#if default_value="${item.code}">
			<option selected="selected" value="${item.code}" <#if !item.name?has_content>label="${i18n("portal.util.labelEmpty")}"</#if>>${item.name}</option>
			<#else>
			<option value="${item.code}" <#if !item.name?has_content>label="${i18n("portal.util.labelEmpty")}"</#if>>${item.name}</option>
			</#if>
			</#list>
		<#else>
			<#list items as item>
			<#if default_value="${item.code}">
			<option selected="selected" value="${item.code}" <#if !item.name?has_content>label="${i18n("portal.util.labelEmpty")}"</#if>>${item.name}</option>
			<#else>
			<option value="${item.code}" <#if !item.name?has_content>label="${i18n("portal.util.labelEmpty")}"</#if>>${item.name}</option>
			</#if>
			</#list>
		</#if>
	<#else>
		<#nested>
	</#if>
	</select>
</#macro>...

Paramètres :

  • name (obligatoire)
  • id : reprend la valeur de name
  • title (string)
  • size (string) : classe Bootstrap déterminant la taille du texte et de la liste déroulante. Valeurs possibles : 'sm', 'lg'
  • items (int) : liste des objets passés à la liste déroulante.
  • sort (boolean) : Permet de trier la liste par nom. Par défaut est false.
  • default_value (int) : valeur par défaut de la liste déroulante.
  • multiple (int) : seulement en cas de choix multiples. Si la valeur de multiple est supérieure à 0, celle-ci sera passée à l'attribut size du select.
  • params (string) : (permet d'ajouter d'autres attributs)

La macro peut également être utilisée sans lui passer de liste d'objets.

progressBar

Fonctionne avec le script JQuery "Complexify".

Rendu HTML : 

<div class="progress">
		<div id="progressbar" class="progress-bar progress-bar-striped" role="progressbar">
			<div id="complexity">0%</div>
		</div>
	</div>

Appel de la macro : 

<@progressBar />

Macro : 

<#macro progressBar description='' id='' params=''>
	<div class="progress"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
		<div id="progressbar" class="progress-bar progress-bar-striped" role="progressbar">
			<div id="complexity">0%</div>
		</div>
	</div>
	<#if description!=''>
		<span class="progress-description">${description}</span>
	</#if>
</#macro>

Paramètres :

  • description (string)
  • id (string)
  • params (string) : permet d'ajouter d'autres attributs
staticText

Ce composant peut être adapté à une utilisation dans des formulaires pour afficher une valeur fixe non modifiable, ou bien en-dehors d'un formulaire.

HTML : 

<p class="form-control-static">
	...
</p>

Appel de la macro : 

<@staticText>
	...
</@staticText>

Macro : 

<#macro staticText inForm=true color='' id='' params=''>
    <p class="<#if inForm>form-control-static</#if><#if color!=''> text-${color}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
        <#nested>
    </p>
</#macro>

Paramètres :

  • inForm (boolean) : par défaut à true, pour utiliser dans un formulaire, ajoute la classe "form-control-static".
  • color (string) : permet de spécifier une classe de couleur parmi les couleurs de Bootstrap (muted/primary/success/info/warning/danger) ou celles d'AdminLTE (red/yellow/aqua/blue/black/light-blue/green/gray/navy/teal/olive/lime/orange/fuchsia/purple/maroon)
  • id (string)
  • params (string) : permet d'ajouter d'autres attributs
Boutons et liens
button

HTML : 

<button type="button" class="btn btn-primary">
	...
</p>

Appel de la macro : 

<@button />

Macro : 

<#macro button name='' id='' type='button' size='sm' color='btn-primary' style='btn-flat' class='' params='' value='' title='' tabIndex='' showTitle=true showTitleXs=true showTitleSm=true showTitleMd=true showTitleLg=true buttonIcon='' disabled=false iconPosition='left' dropdownMenu=false>
	<#-- Bootstrap 4 transition -->
	<#if color='btn-secondary'>
		<#assign color_temp='btn-default'>
	<#else>
		<#assign color_temp=color>
	</#if>

	<#-- Visibility of button title -->
	<#assign showTitleClass = '' />
	<#if showTitle = false><#assign showTitleClass = 'sr-only' /></#if>
	<#if showTitleXs = false><#assign showTitleClass = showTitleClass + 'hidden-xs' /></#if>
	<#if showTitleSm = false><#assign showTitleClass = showTitleClass + ' ' + 'hidden-sm' /></#if>
	<#if showTitleMd = false><#assign showTitleClass = showTitleClass + ' ' + 'hidden-md' /></#if>
	<#if showTitleLg = false><#assign showTitleClass = showTitleClass + ' ' + 'hidden-lg' /></#if>

	<#if dropdownMenu>
	<div class="dropdown">
	</#if>

	<button class="<#if style!='close'>btn</#if><#if size!='' && style!='btn-box-tool'> btn-${size}</#if><#if color_temp!='' && style!='btn-box-tool'> ${color_temp}</#if><#if style!=''> ${style}</#if><#if dropdownMenu> dropdown-toggle</#if><#if class!=''> ${class}</#if>" type="${type}"<#if title!=''> title="${title}"</#if><#if name!=''> name="${name}"</#if><#if id!=''> id="${id}"</#if><#if value!=''> value="${value}"</#if><#if params!=''> ${params}</#if><#if disabled> disabled</#if><#if dropdownMenu> data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"</#if>>
		<#if buttonIcon!='' && iconPosition='left'><@icon style=buttonIcon /></#if>
		<#if showTitleClass!='' && style!='btn-box-tool'><span class="${showTitleClass}"></#if>${title}<#if showTitleClass!='' && style!='btn-box-tool'></span></#if>
		<#if buttonIcon!='' && iconPosition='right'><@icon style=buttonIcon /></#if>
		<#if dropdownMenu>
		&#160;<@icon style='caret-down' />
		</#if>
	</button>

	<#if dropdownMenu>
	<ul class="dropdown-menu"<#if id!=''> aria-labelledby="${id}"</#if>>
		<#nested>
	</ul>
	</div>
	</#if>
</#macro>

Paramètres :

  • name (string)
  • id (string)
  • type (string) : button (défaut), submit
  • size (string) : à définir parmi les choix proposés par Bootstrap (sm ou lg). Par défaut "sm"
  • color (string) : à définir parmi les choix proposés par Bootstrap et AdminLTE. Par défaut "btn-primary"
  • style (string) : btn-block/btn-flat/close/navbar-toggle/collapsed... Par défaut "btn-flat"
  • class (string) : pour toute classe supplémentaire
  • params (string) : permet d'ajouter d'autres attributs
  • value (string)
  • title (string)
  • tabIndex (string)
  • showTitle (boolean) : permet de cacher l'intitulé du bouton sur toutes les tailles d'écran. Par défaut "true"
  • showTitleXs, showTitleSm, showTitleMd, showTitleLg (boolean) : Permet de cacher l'intitulé du bouton en fonction de la taille de l'écran. Par défaut "true"
  • buttonIcon (string) : nom de l'icône dans la bibliothèque Font Awesome
  • disabled (boolean)
  • iconPosition (string) : left/right. Permet de choisir si l'icône apparaît à gauche ou à droite du texte du bouton. Par défaut "left"
  • dropdownMenu (boolean) : par défaut à false, permet de transformer le bouton en liste déroulante. Sous Bootstrap 3 il s'agit d'une liste ul avec des éléments de liste li ; la macro évoluera lors du passage à Bootstrap 4 pour passer le conteneur en div et les éléments de liste en liens a.
aButton

HTML : 

<a href="" class="btn btn-primary btn-flat">Your link here</a>

Appel de la macro : 

<@aButton href=''>Your link here</@aButton>

Macro : 

<#macro aButton name='' id='' href='' size='sm' color='btn-primary' style='btn-flat' class='' params='' title='' tabIndex='' showTitle=true showTitleXs=true showTitleSm=true showTitleMd=true showTitleLg=true buttonIcon='' disabled=false iconPosition='left' dropdownMenu=false>
	<#-- Bootstrap 4 transition -->
	<#if color='btn-secondary'>
		<#assign color_temp='btn-default'>
	<#else>
		<#assign color_temp=color>
	</#if>

	<#-- Visibility of button title -->
	<#assign showTitleClass = '' />
	<#if showTitle = false><#assign showTitleClass = 'sr-only' /></#if>
	<#if showTitleXs = false><#assign showTitleClass = showTitleClass + 'hidden-xs' /></#if>
	<#if showTitleSm = false><#assign showTitleClass = showTitleClass + ' ' + 'hidden-sm' /></#if>
	<#if showTitleMd = false><#assign showTitleClass = showTitleClass + ' ' + 'hidden-md' /></#if>
	<#if showTitleLg = false><#assign showTitleClass = showTitleClass + ' ' + 'hidden-lg' /></#if>

	<a class="btn<#if size!=''> btn-${size}</#if><#if color_temp!=''> ${color_temp}</#if><#if style!=''> ${style}</#if><#if class!=''> ${class}</#if>"<#if name!=''> name="${name}"</#if><#if id!=''> id="${id}"</#if> href="${href}" title="${title}"<#if params!=''> ${params}</#if><#if disabled> disabled</#if><#if dropdownMenu> data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"</#if>>
		<#if buttonIcon!='' && iconPosition='left'><@icon style=buttonIcon /></#if>
		<span class="${showTitleClass}">${title}</span>
		<#if buttonIcon!='' && iconPosition='right'><@icon style=buttonIcon /></#if>
		<#if dropdownMenu>
		&#160;<@icon style='caret-down' />
		</#if>
		<#nested>
	</a>
</#macro>

Paramètres :

  • name (string)
  • id (string)
  • href (string)
  • size (string) : à définir parmi les choix proposés par Bootstrap (sm ou lg). Par défaut "sm"
  • color (string) : à définir parmi les choix proposés par Bootstrap et AdminLTE. Par défaut "btn-primary"
  • style (string) : btn-block/btn-flat/close/navbar-toggle/collapsed... Par défaut "btn-flat"
  • class (string) : pour toute classe supplémentaire
  • params (string) : permet d'ajouter d'autres attributs
  • title (string)
  • tabIndex (string)
  • showTitle (boolean) : permet de cacher l'intitulé du bouton sur toutes les tailles d'écran. Par défaut "true"
  • showTitleXs, showTitleSm, showTitleMd, showTitleLg (boolean) : Permet de cacher l'intitulé du bouton en fonction de la taille de l'écran. Par défaut "true"
  • buttonIcon (string) : nom de l'icône dans la bibliothèque Font Awesome
  • iconPosition (string) : left/right. Permet de choisir si l'icône apparaît à gauche ou à droite du texte du bouton. Par défaut "left"
  • dropdownMenu (boolean) : par défaut à false, permet de transformer le bouton en liste déroulante
dropdownMenu

HTML : 

<ul class="dropdown-menu">Your list here</ul>

Appel de la macro : 

<@dropdownMenu>Your list here</@dropdownMenu>

Macro : 

<#macro dropdownMenu class='' id='' params=''>
	<ul class="dropdown-menu ${class}"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
		<#nested>
	</ul>
</#macro>

Paramètres :

  • class (string)
  • id (string)
  • params (string)
Groupements de composants
inputGroup

HTML : 

<div class="input-group">
	Your content here
</div>

Appel de la macro : 

<@inputGroup>Your content here</@inputGroup>

Macro : 

<#macro inputGroup size='' id='' params=''>
	<div class="input-group<#if size!=''> input-group-${size}</#if>" <#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
		<#nested>
	</div>
</#macro>

Paramètres :

  • size (string) : sm ou lg
  • id (string)
  • params (string)
inputGroupItem

HTML : 

<span class="input-group-btn">
	Your content here
</span>

Appel de la macro : 

<@inputGroupItem>Your content here</@inputGroupItem>

Macro : 

<#macro inputGroupItem type='btn' id='' params=''>
	<span class="input-group-${type}"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
		<#nested>
	</span>
</#macro>

Paramètres :

  • type (string) : btn ou addon. Par défaut btn
  • id (string)
  • params (string)
btnGroup

HTML : 

<div class="btn-group">
	Your content here
</div>

Appel de la macro : 

<@btnGroup>Your content here</@btnGroup>

Macro : 

<#macro btnGroup size='' class='' id='' params='' ariaLabel=''>
	<div class="btn-group<#if size!=''> btn-group-${size}</#if><#if class!=''> ${class}</#if>" role="group"<#if ariaLabel!=''> aria-label="${ariaLabel}"</#if><#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
		<#nested>
	</div>
</#macro>

Paramètres :

  • size (string) : sm ou lg
  • class (string)
  • id (string)
  • params (string)
  • ariaLabel (string)
btnToolbar

HTML : 

<div class="btn-toolbar">
	Your content here
</div>

Appel de la macro : 

<@btnToolbar>Your content here</@btnToolbar>

Macro : 

<#macro btnToolbar id='' params='' ariaLabel=''>
	<div class="btn-toolbar" role="toolbar"<#if ariaLabel!=''> aria-label="${ariaLabel}"</#if><#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
		<#nested>
	</div>
</#macro>

Paramètres :

  • id (string)
  • params (string)
  • ariaLabel (string)

Icônes

icon

HTML : 

<i class="fa fa-close"></i>

Appel de la macro : 

<@icon style='close' />

Macro : 

<#macro icon prefix='fa fa-' style='' class='' title='' id='' params=''>
  <i class="${prefix}${style}<#if class!=''> ${class}</#if>" aria-hidden="true"<#if title!=''> title='${title}'</#if><#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>></i>
</#macro>

Paramètres :

  • prefix (string) : correspond aux classes associées à la bibliothèque d'icônes. Par défaut Font Awesome
  • style (string) : ce paramètre peut être utilisé pour ajouter une classe de taille (fa-lg, fa-2x, fa-3x, fa-4x, fa-5x)
  • class (string) : pour ajouter une classe supplémentaire
  • title (string) : permet d'ajouter un attribut "title" qui apparaît au passage de la souris sur l'icône
  • id (string)
  • params (string)

Onglets

tabs

HTML : 

<div class="nav-tabs-custom">Your content here</div>

Appel de la macro : 

<@tabs>Your content here</@tabs>

Macro : 

<#macro tabs color='' id='' params=''>
	<div class="nav-tabs-custom<#if color!=''> ${color}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
		<#nested>
	</div>
</#macro>

Paramètres :

  • color (string) : permet de spécifier la couleur des onglets. Les classes sont issues de portal_admin.css et reprennent les couleurs de Bootstrap et AdminLTE : top-danger, top-success, top-warning, top-aqua, top-gray, top-navy, top-teal, top-purple, top-orange, top-maroon, top-black
  • id (string)
  • params (string)
listTabs

Ce composant est un wrapper issu d'AdminLTE.

HTML : 

<ul class="nav nav-tabs">Your content here</ul>

Appel de la macro : 

<@listTabs>Your content here</@listTabs>

Macro : 

<#macro listTabs type='tabs' id='' params=''>
		<ul class="nav nav-${type}"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if>>
			<#nested>
		</ul>
</#macro>

Paramètres :

  • type (string) : permet de spécifier le type. Par défaut tabs
  • id (string)
  • params (string)
tabContent

Accordéons

accordionContainer
accordionPanel
accordionHeader
accordionBody

Modales

modal
modalHeader
modalBody
modalFooter

Listes

listGroup
unstyledList
dropdownList

Autres composants

tag
breadcrumbs
coloredBg

Macros pour composants AdminLTE

Le back office embarque la feuille de style d'AdminLTE, permettant d'utiliser des composants Bootstrap stylisés et plus attrayants visuellement. Ceux-ci sont utilisés dans la grande majorité des templates du back office de Lutece.

infoBox (AdminLTE)
callout (AdminLTE)
alert (AdminLTE)
box (AdminLTE)
smallBox (AdminLTE)
errorPage (AdminLTE)