Utilisation de Wiki

Présentation de la barre d'outils

Ajout d'une image

Possibilité d'ajouter une balise (popup>) permettant l'ouverture de l'image dans une fenêtre popup :

{{popup> :wiki:docs_en_cours:atc_adresse.png?direct&400 |}}

Modification de la taille de l'image en modifiant les chiffres finaux : 400 ou 600 ou …

Ajout d'un halo autour de l'image pour la faire ressortir, avec la balise WRAP imgweb :

<WRAP imgweb>{{popup> :wiki:docs_en_cours:atc_adresse.png?direct&300 |}}</WRAP>

Sans halo	Avec halo

Informations générales

Retour à la ligne

Un retour à la ligne simple n'a aucun impact dans le visuel, juste une meilleure lecture du “codage”

Pour voir apparaître un retour à la ligne il faut faire un double “Maj + Entrée”
ou bien par l'utilisation de deux contre-obliques “\\” en fin de ligne ou suivies d'un espace en cours de texte

Couleur

Les couleurs de barres, boutons, etc… sont symbolisées par les mots :

Défaut : Pas de couleur

Primary : Bleu

Success : Vert

Danger : Rouge

Warning : Orange

Info : Bleu clair

Link : Gris clair

Bloc code

possibilité d'insérer des blocs code en utilisant les balises

"<code> ou <file> ou bien en mettant 2 espaces avant le code"

Extension Wrap

Colonnes

Permet de mettre un texte sur deux colonnes avec 2 formats de taille de colonne

<WRAP group> <WRAP half column> Ligne 1\\ \\Maj Entrée Ligne 2 Maj Entrée </WRAP> <WRAP column> Ligne a\\ \\Maj Entrée Ligne b Maj Entrée </WRAP> </WRAP>	Exemple :
<WRAP group> <WRAP column third> Ligne 1\\ \\Maj Entrée Ligne 2 Maj Entrée </WRAP> <WRAP column> Ligne a\\ \\Maj Entrée Ligne b Maj Entrée </WRAP> </WRAP>

Exemple :

Fonction Bloc Simple

Possibilité de modifier :

la mise en forme du texte

la largeur du cadre arrondi en jouant sur le % (par défaut 60% de la largeur)

Bloc simple

Bloc Information

Possibilité de modifier :

la mise en forme du texte

la largeur du cadre arrondi en jouant sur le % (par défaut 60% de la largeur)

Bloc Information

Bloc Astuce

Possibilité de modifier :

la mise en forme du texte

la largeur du cadre arrondi en jouant sur le % (par défaut 60% de la largeur)

Bloc Astuce

Bloc Important

Possibilité de modifier :

la mise en forme du texte

la largeur du cadre arrondi en jouant sur le % (par défaut 60% de la largeur)

Bloc Important

Bloc Alerte

Possibilité de modifier :

la mise en forme du texte

la largeur du cadre arrondi en jouant sur le % (par défaut 60% de la largeur)

Bloc Alerte

Bloc Aide

Possibilité de modifier :

la mise en forme du texte

la largeur du cadre arrondi en jouant sur le % (par défaut 60% de la largeur)

Bloc Aide

Bloc Téléchargement

Possibilité de modifier :

la mise en forme du texte

la largeur du cadre arrondi en jouant sur le % (par défaut 60% de la largeur)

Bloc Téléchargement

Bloc à faire

Possibilité de modifier :

la mise en forme du texte

la largeur du cadre arrondi en jouant sur le % (par défaut 60% de la largeur)

Bloc à faire

Particulièrement Important

Met le texte en rouge

Possibilité de modifier la mise en forme du texte

Ex: Ce message est Particulièrement Important. Merci de le prendre en considération.

Important

Met le texte en surlignage jaune

Possibilité de modifier la mise en forme du texte

Ex: Ce message est important. Merci d'en tenir compte.

Peu Important

Met le texte en écriture plus petite

Possibilité de modifier la mise en forme du texte

Ex: Ce message est peu important

Bootstrap Wrapper

La documentation d'utilisation de cette barre de travail est accessible depuis le lien suivant : Bootstrap Wrapper

Certaines fonctions devront être utilisées en combiné avec d'autres fonctions et n'ont pas d'intérêt seules.

Acordéon

Un accordéon réalisé avec le composant panel.

Texte caché !

Badge

Couleur non modifiable, Possibilité de modifier la mise en forme du texte

Badge

Bar

Créé une barre de longueur variable (gérée par “value”)pour schématiser des proportions

Striped : rayé

Show value : indique la valeur choisie dans la barre

Animate : rayure en mouvement

Test Bar

Progress Bar

Créé une barre schématisant une progression ajustable

Button

Créé des boutons de couleurs et tailles différentes selon les besoins. A utiliser en combinaison avec d'autres fonctionnalités

Default Primary Success Info Warning Danger Link

Callout

Créé cadre avec une barre de couleur sur le côté gauche

Corps de texte

Carousel

Fait défiler des images, avec éventuellement un commentaire dessus

Défilement automatique ou manuel

Ex :

Logo Analys Logo Atys XE
Procédure :

<WRAP carousel_s>
<carousel >
<slide> **//Logo Analys//**
{{ :wiki:dossier:documents:mondossier:logo_analys.png?nolink |}}</slide>
<slide> **__Logo Atys XE__**
{{ :wiki:dossier:documents:mondossier:logo_atys_xe.png?nolink |}}</slide>
</carousel>
</WRAP>

Possibilité de fixer la hauteur du carousel pour éviter les mouvement de texte autour du carousel lorsque la hauteur change.

Utilisation d'une balise positionnée avant le carousel

<WRAP carousel_s>
<carousel interval="5000" keyboard="true">
<slide>page 1 </slide>
<slide>page 2 </slide>
</carousel>
</WRAP>

4 hauteurs de carousel possible :

<WRAP carousel_s> : hauteur 350

<WRAP carousel_m> : hauteur 550

<WRAP carousel_l> : hauteur 650

<WRAP carousel_xl> : hauteur 850

Collapse

Combiner la fonction collapse avec button permet de créer un bouton qui actionne l'ouverture d'une fenêtre. Si on veut que la fenêtre soit dans un cadre gris clair, il faut en plus utiliser la fonction well :

Procédure :

<button collapse="foo">Click Me</button>
<collapse id="foo" collapsed="true">
<well>
Test
</well>
</collapse>

Visuel :

Click Me

Test

Grid

.col-xs-12 .col-sm-6 .col-lg-8.col-xs-6 .col-lg-4

Image

Permet d'insérer des images dans des ronds, carrés ou dans un cadre…

Jumbotron

Permet d'attirer l'attention sur certains titres en les grossissant.

Hello, world!

Procédure :

<jumbotron>
Hello, world!
</jumbotron>

Label

Surlignage du texte en couleur, possibilité de modifier le style du texte (italique, souligné, etc…)

Surlignage en vert du texte
Procédure :

<label type="success">__Surlignage en vert du texte__</label>

Lead

Permet de démarquer un paragraphe des autres en le grossissant :

Ce texte se démarque
Procédure :

<lead>Ce texte se démarque</lead>

List Group

Permet de créer une liste sous forme de tableau à 1 colonne.

Possibilité de combiner cette liste avec l'utilisation de Badges, de liens, d'icones, etc…

Ligne 1

Ligne 2

etc…

Procédure :

<list-group>
* {{glyphicon>pencil?18}} Ligne 1
* Ligne 2
* etc...
</list-group>

Modal

Permet d'ouvrir une fenêtre dynamique de taille variable par action sur un bouton :

Large modal Small modal

… …
Procédure :

<btn type="primary" modal="modal-large">Large modal</btn> <btn type="primary" modal="modal-small">Small modal</btn>
<modal id="modal-large" size="lg" title="Large modal">...</modal>
<modal id="modal-small" size="sm" title="Small modal">...</modal>

Nav tabs

Créé une barre de navigation (horizontale ou verticale (stacked)) ouvrant sur des menus qui peut amener vers un lien interne ou externe

Site Analys

https://www.analys-informatique.com/accueil

Dokuwiki

Le wiki d'ATYS

La traçabilité dans Atys

Site Analys

https://www.analys-informatique.com/accueil

Dokuwiki

Le wiki d'ATYS

La traçabilité dans Atys

Site Analys

https://www.analys-informatique.com/accueil

Dokuwiki

Le wiki d'ATYS

La traçabilité dans Atys

Site Analys

https://www.analys-informatique.com/accueil

Dokuwiki

Le wiki d'ATYS

La traçabilité dans Atys

Procédure :

<nav type="tabs" justified="true" >
* Site Analys
* https://www.analys-informatique.com/accueil
* Dokuwiki
* [[:start|Le wiki d'ATYS]]
* [[wiki:dossier:tracabilite|La traçabilité dans Atys]]
</nav>

Site Analys

https://www.analys-informatique.com/accueil

Dokuwiki

Le wiki d'ATYS

La traçabilité dans Atys

Procédure :

<nav type="tabs" stacked="true">
* Site Analys
* https://www.analys-informatique.com/accueil
* Dokuwiki
* [[:start|Le wiki d'ATYS]]
* [[wiki:dossier:tracabilite|La traçabilité dans Atys]]
</nav>

Page-header

Créé un titre, sans qu'il apparaisse dans la table des matières

Panel

Créé un encadré de couleur avec Titre, Sous-titre et éventuellement un pied.

Pas de possibilité de mettre en gras, italique etc… pour les titres , sous-titres et pieds, mais possible pour le texte

Texte à renseigner

Procédure :

<panel type="success" title="Titre" footer="Pied" subtitle="Sous-titre" >**Texte à renseigner**</panel>

Popover

Associé à un bouton, permet l'ouverture d'une bulle :

titre optionnel

possibilité de gérer la position de la bulle (top, bottom, right, left)

Click to the button
Procédure :

<popover placement="bottom" title="Popover title" content="Contenu du popover : texte descriptif">
<btn type="danger" size="lg">Click to the button</btn>
</popover>

Tooltip

Créé une “bulle” commentaire en passant la souris sur le mot identifié (souligné).

Lorem ipsum

Well

Créé un cadre sur fond gris autour du texte. Mise en forme du texte possible.

Ce paragraphe est un test :

mise en forme possible,

liste à puce possible

Tracedump:

newBaseSize: 16pt
newBaseSizeInPt: 16