• Skip to the menu
  • Skip to the main content
Back
Logo Ipedis

COMPONENTS

Tab-panel

A tab panel is a component in the user interface that enables users to switch between various content sections simply by clicking on tabs.

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

Follow these steps to install and use the ip-tab-panel in your project.

Step 1

Install the ip-tab-panel component as a dependency in your project:

npm install ip-accordion

Step 2

Import the module into your script file:

Usage

To use this component, we must add the properties as attributes and use slot for each content of tab.

To use this component, we must add the properties as attributes and use slot for each content of tab.

Property Attribute Necessity Description Type Default
tabPanelHeaders tab-panel-headers Required It defines headers for each tab in the IP Tab Panel component using a JSON array TabPanelInterface[] | string Undefined
selectedTab selected-tab OptionalThis is the tab that displayed by default string Undefined
tabPanelTitle tab-panel-title OptionalThis is the title of the tap-panel string Undefined
titleTag title-tag OptionalIt represents the tag we want to use for the tab-panel-title; it's required if you add title string Undefined

tab-panel-headers

This is used to set the tab-panel header title. It has 4 properties:

  • title: this is optional for the content title
  • imagePath: this is optional if you want to add an image with or as a title
  • imgPathActive: this is optional for the image that will be displayed when it is selected
  • alt: this is the alt of the image that is required for accessibility if you add image

Panels content

The contents of the panel should have as attribute slot="tab-content-1" and value of tab-content-* incremented accordingly

Example

Customization

Style

We have a set of predefined variable used to customize the tab-panel:

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

To update the values, use the following CSS code:

    
  

Class

We have a set of classes that could be used to customise accordingly:

  • tab-container: for the container of the panels
  • tab-panel-title: for the title of the panel
  • tab-btn-list: for the list of the button in the header of the panel
  • tab-btn: for button in the header
  • tab-btn-active: for button in the header if its content is displayed
  • tab-icon: for the image or icon in the header of the panel
  • tab-icon-active: ffor the image or icon in the header if its content is displayed
  • tab-text: for the text in the header

Example

    
  

    
  

    
  
  • Privacy and cookie policy Opens in a new window
  • Legal Notice Opens in a new window
  • Ipedis.com Opens in a new window