• Aller au menu
  • Aller au contenu principal
Retour
Logo Ipedis

COMPOSANTS

Système d'onglets

Un panneau à onglets est un composant d’interface utilisateur qui permet aux utilisateurs de passer d’une section de contenu à une autre en cliquant simplement sur des onglets.

Demo

Accessibilité

6 Bonnes Pratiques pour être en Conformité

Aujourd’hui, encore beaucoup de sites Web et d’applications mobiles sont conçus sans penser à la navigation des personnes en situation de handicap. Pourtant, pour ces personnes, l’outil digital représente un véritable levier d’intégration, et leur apporte bien souvent un surcroît d’indépendance.Selon les différents types de handicaps, les manquements les plus couramment relevés sur le Web ne sont pas les mêmes.

DOCUMENT PDF

Comment ont été conçus les PDF ?

À l’origine, les documents PDF n’étaient pas conçus pour être lus via un ordinateur mais pour être imprimés. Aujourd’hui, les documents PDF sont de plus en plus utilisés par les entreprises pour échanger et diffuser de l’information numérique de façon plus professionnelle (présentation, sécurité pour la protection de données). Sans traitement, les documents PDF sont inaccessibles pour des personnes non-voyantes utilisant des outils tels qu’un lecteur d’écran.

Statistical

Gérer efficacement la création

PubliSpeak a été pensé pour vous faciliter la gestion de vos publications. Toutes les informations relatives à votre publication sont consultables en un clin d'œil. Titre, clients, nombre de pages, langues, dates et statuts. Les statuts font intégralement partie du cycle de vie d’une publication et de votre gestion de projet. Rendre visible son travail pour le faire valider par ses collaborateurs ou ses clients n’est pas de tout repos.

Certification

Nos équipes vous accompagnent

Notre plateforme de publications digitales répond à vos besoins mais vous n’êtes pas à l'aise avec l’accessibilité numérique .Pas de panique, onboarding, formation et support, nos équipes vous accompagnent vers l’autonomie et la prise en main de l’accessibilité numérique.Associez vos publications entre elles et construisez un corpus de documents afin de permettre à votre lecteur de naviguer facilement entre vos différentes publications.

Legislation

Valider votre travail auprès de vos clients

PubliSpeak est un SaaS prêt à l’emploi. Il permet de charger votre fichier PDF initial final en un clic et de personnaliser la publication selon vos envies. L’éditeur est un formidable moteur de création pour la vue article. Et plus les lecteurs restent, plus ils sont convaincus ! Si le temps vous manque, des “inspirations” sont prêtes à l’emploi ! Néanmoins, si vous préférez déléguer la partie édition, notre studio dédié s’en chargera.

Code

Documentation

Installation

Suivez les étapes ci-dessous pour installer et utiliser le composant ip-tab-panel dans votre projet.

Étape 1

Installez le composant ip-tab-panel en tant que dépendance dans votre projet :

npm install ip-accordion

Étape 2

Importez le module dans votre fichier script :

Utilisation

Pour utiliser ce composant, il faut ajouter les propriétés sous forme d’attributs et utiliser des slots pour définir le contenu de chaque onglet.

Pour utiliser ce composant, il faut ajouter les propriétés sous forme d’attributs et utiliser des slots pour définir le contenu de chaque onglet.

Propriété Attribut Nécessité Description Type Valeur par défaut
tabPanelHeaders tab-panel-headers Requise Définit les en-têtes pour chaque onglet du composant IP Tab Panel en utilisant un tableau JSON. TabPanelInterface[] | string Non défini
selectedTab selected-tab OptionnelOnglet affiché par défaut. string Non défini
tabPanelTitle tab-panel-title OptionnelTitre du panneau à onglets. string Non défini
titleTag title-tag OptionnelBalise utilisée pour le titre du panneau à onglets ; requis si un titre est ajouté. string Non défini

tab-panel-headers

Cet attribut est utilisé pour définir le titre d’en-tête du panneau à onglets. Il comporte 4 propriétés :

  • title: optionnel, correspond au titre du contenu.
  • imagePath: optionnel, permet d’ajouter une image avec ou à la place du titre.
  • imgPathActive: optionnel, image affichée lorsque l’onglet est sélectionné.
  • alt: texte alternatif de l’image, obligatoire pour l’accessibilité si une image est ajoutée.

Contenu des panneaux

Le contenu de chaque panneau doit utiliser l’attribut suivant : slot="tab-content-1" et la valeur de tab-content-* augmentée en conséquence

Exemple

Personnalisation

Style

Nous disposons d’un ensemble de variables prédéfinies permettant de personnaliser le panneau à onglets :

  • --ip-tab-primary-color
  • --ip-tab-secondary-color
  • --ip-tab-font
  • --ip-tab-icon

Pour mettre à jour les valeurs, utilisez le code CSS suivant :

    
  

Class

Nous disposons d’un ensemble de classes qui peuvent être utilisées pour personnaliser le composant :

  • tab-container: pour le conteneur des panneaux.
  • tab-panel-title: pour le titre du panneau.
  • tab-btn-list: pour la liste des boutons dans l’en-tête du panneau.
  • tab-btn: pour un bouton dans l’en-tête.
  • tab-btn-active: pour un bouton dans l’en-tête lorsque son contenu est affiché.
  • tab-icon: pour l’image ou l’icône dans l’en-tête du panneau.
  • tab-icon-active: fpour l’image ou l’icône dans l’en-tête lorsque son contenu est affiché.
  • tab-text: pour le texte dans l’en-tête.

Exemple

    
  

    
  

    
  
  • Politique de confidentialité et cookies Ouvre dans un nouvel onglet
  • Mentions légales Ouvre dans un nouvel onglet
  • Ipedis.com Ouvre dans un nouvel onglet