Onglet zone d'attribut vertical et non horizontale

[Hamza (Hamza Raihane)]

Description

Bonjour,

Nous avons un besoin sur un formulaire où plusieurs zones d’attributs sont affichées sous forme d’onglets.

Actuellement, ces onglets sont alignés horizontalement, mais nous souhaiterions qu’ils soient affichés de manière verticale (les uns en dessous des autres).Les options proposé par simplicité sont les suivantes:

Ce besoin serait utile pour plusieurs fonctionnalités avec des zones d’attributs sans titres mais avec une icone.

Pourriez-vous m’indiquer si cela est possible etsi c’est le cas comment configurer ou ajuster les paramètres pour obtenir cet affichage vertical des onglets ?

Merci par avance pour votre aide et vos suggestions

[david (David AZOULAY)]

Effectivement le choix de l’orientation des tabs n’est pas actuellement configurable via le template editor, c’est une bonne idée, nous allons ajouter ça à la roadmap et voir dans quelle mesure ça peut être backporté sur les versions en maintenance (pas de garantie sur ce dernier point)

En attendant un “ugly workaround” consiste visiblement à ajouter la classe CSS tabs-left sur la div appropriée, ex: sur l’objet client de la démo via sa classe JS:

Simplicite.UI.BusinessObjects.DemoClient = class extends Simplicite.UI.BusinessObject {
	onLoadForm(ctn, obj, p) {
		super.onLoadForm(ctn, obj, p);
		$('.objform div[data-area="2,3,4"] .tabs').addClass('tabs-left');
	}
};

Résultat (sans garantie de pérennité dans le temps et à améliorer concernant l’alignement des icones):

[Francois (François Genestin)]

C’est paramétrable depuis la définition de l’objet parent pour les liens 0,n de l’objet :

On ajoutera le paramètre au template editor car ce sera pratique, également pour les tabs intégrés au formulaire.

Pour masquer le libellé, il faudra je pense faire du CSS, par exemple :

.objform.object-DemoSupplier .objlinks-tab .nav-item span {
   display: none;
}

[Hamza (Hamza Raihane)]

Hello François, David, merci pour vos retours rapides et vos astuces pour réaliser ceci.

Nous avons trouvé un moyen d’obtenir le résultat visuel suivant :

Pour obtenir ce résultat dans le formulaire de l’objet, nous avons ajouté la classe tabs-left dans les zones d’attributs concernées :

$('div[data-area="13,14"] .tabs').addClass('tabs-left');

Et dans le style, ce code pour aligner les zones d’attributs :

 .tabs-left > .tab-content { width: calc(100%) !important; }
 .tabs-left > .nav-tabs { width: auto;  min-width: auto; }

Pour masquer le titre, nous l’avons mis dans un span avec style="display:none".

Je partage cela avec vous pour savoir si c’est la facon de faire, en attendant que cette fonctionnalité soit disponible en natif .

[Francois (François Genestin)]

Merci pour ce retour, c’est malin.

L’évolution est en cours sur la 6.1 afin de pouvoir :

• mettre les onglets à gauche, à droite ou en bas
• pouvoir masquer le libellé (s’il y a une icone) plus simplement
• corriger quelques problèmes d’affichage quand un tab contient d’autres tabs
• améliorer l’accessibilité