Aggiungere dei parametri ad un template dà agli utenti la possibilità di personalizzarne i valori.
I parametri saranno accessibili dal pulsante Stili nel designer o definiti all'interno di contenitori.
Tipi di parametri disponibili
| Opzione | Descrizione | Esempio |
| mn:param | Consente di dichiarare un attributo. È consigliabile aggiungerlo in un tag <meta> per evitare che sia renderizzato dal browser. | <meta mn:param/> |
| mn:name | Assegna un nome ad un parametro. | <meta mn:param mn:name="myparam"/> |
| mn:type | Definisce il tipo di parametro. | Lista dei parametri disponibili |
| mn:default | Imposta un valore di default per il parametro configurato. | <meta mn:param mn:name="myparam"/> |
Lista dei parametri disponibili
| Nome parametro | Descrizione | Esempio |
|---|---|---|
| mn:type="text" | Definisce un parametro di tipo testuale. | <meta mn:param mn:name="mytext" mn:type="text" mn:default="Sono un testo" mn:label="Testo"/> |
| mn:type="html" | Definisce un parametro di tipo HTML. | <meta mn:param mn:name="myhtml" mn:type="html" mn:default="Sono un contenuto html" mn:label="Contenuto"/> |
| mn:type="multilinetext" | Apre l'editor in modalità inline e permette di scrivere del testo in modalità multiline (per esempio per inserire delle liste di placeholder). | |
| mn:type="boolean" | Definisce un parametro di tipo booleano. | <meta mn:param mn:name="myboolean" mn:type="boolean" mn:default="true" mn:label="Mostrare il contenuto"/> |
| mn:type="url" | Definisce un parametro di tipo link. | <meta mn:param mn:name="myurl" mn:type="url" mn:default="http://www.mysite.it/" mn:label="Link"/> |
| mn:type="image" | Definisce un parametro di tipo immagine. | <meta mn:param mn:name="myimage" mn:type="image" mn:min-width="150" mn:max-width="300" mn:min-height="150" mn:max-height="150" mn:label="Param image"/> |
| mn:type="color" | Definisce un parametro per un colore. | <meta mn:param mn:name="mycolor" mn:type="color" mn:default="#ff00ff" mn:label="Param color"/> |
| mn:type="taglist" | Definisce un parametro per una taglist. | <meta mn:param mn:name="mytaglist" mn:type="taglist" mn:default="tag1,tag2" mn:label="Param taglist"/> |
| mn:type="date" | Definisce un parametro di tipo data. | <meta mn:param mn:name="mytdate" mn:type="date" mn:label="Param date"/> |
| mn:type="datetime" | Definisce un parametro di tipo data e ora. | <meta mn:param mn:name="mytdatetime" mn:type="datetime" mn:label="Param datetime"/> |
| mn:type="int" | Definisce un parametro di tipo integer. | <meta mn:param mn:name="myint" mn:type="int" mn:label="Param int"/> |
| mn:type="select" | Definisce un parametro per l'inserimento di una select. Impostando l'attributo mn:buttons le opzioni sono visualizzate come pulsanti. |
<span mn:param mn:name="myselect" mn:type="select" mn:default="value 2" mn:label="Opzioni" style="display:none"> <option value="value 1">Label 1</option> <option value="value 2">Label 2</option> </span> <span mn:param mn:name="myselect" mn:buttons mn:default="value 2" ... |
<span style="color:[param:mycolor];">[param:mytext] [param:myselect] [param:pdate] [param:pdatetime pattern='HH:mm:ss dd/MM/yyyy'] [param:pint]</span> <span mn:if="param.myboolean">[param:myhtml]</span> <a href="[param:myurl]" mn:taglist="[param:mytaglist]"><img src="[param:myimage]" /></a>
Attenzione:
I tag
È inoltre consigliato nascondere le select con uno stile per non visualizzarle nel designer.
I tag
span non devono essere inseriti all'interno di un tag di tipo HEAD.È inoltre consigliato nascondere le select con uno stile per non visualizzarle nel designer.
Personalizzazione interfaccia
Giotto offre la possibilità di personalizzare l'interfaccia mediante la quale gli utenti possono scegliere il valore dei parametri.
| Parametro | Descrizione | Esempio |
|---|---|---|
| mn:label | Aggiunge un'etichetta all'elemento usato per inserire il valore. | <meta mn:param mn:label="inserire qui il nome del parametro"/> |
| mn:section | Seleziona la sezione in cui sarà mostrato il parametro. | <meta mn:param mn:name="param1" mn:label="Inserisci qui il valore del parametro 1" mn:section="Sezione 1" /> |
| mn:tab | Mostra il parametro in uno specifico tab. | |
| mn:help | Inserisce un help in corrispondenza del parametro selezionato. | <meta mn:param mn:name="param1" mn:label="Inserisci qui il valore del parametro 1" mn:section="Sezione 1" mn:help="Questo è l'help associato al parametro 1"/> |
| mn:panel | Consente di aggiungere un pannello in cui inserire gli oggetti per il drag and drop. | |
| mn:thumbnail | Mostra un'icona nel pannello degli oggetti del designer. Per indicare l'icona da mostrare utilizza il suo segnaposto specifico. |
|
| mn:required | Rende obbligatorio l'inserimento di un parametro. | <meta mn:param mn:name="param" mn:label="Param " mn:required /> |
| mn:showif | Condiziona la visibilità di un parametro sulla base di un altro parametro. Accetta i parametri true e false. |
<meta mn:param mn:type="boolean" mn:name="option" mn:label="Mostrare un testo" /> <meta mn:param mn:type="text" mn:name="testo" mn:showif="param.option" mn:label="Testo" /> <span mn:if="param.option">[param:text]</span> |
<div mn:typedef mn:name="myarticle" mn:label="My article" mn:extends="article" mn:panel mn:panelsection.ita='Body' mn:panelorder='12' mn:thumbnail = '[ico:imgtop]' > <meta mn:param mn:name="subtitle" mn:type="text" mn:default="Sottotitolo" mn:showafter="title" mn:label="Sottotitolo"> [param:title]
[param:subtitle] </div>