useTabs

Ce composable permet de gérer simplement les props de DsfrTabs et de ses enfants pour gérer l’affichage du contenu de l’onglet (grâce à la prop selected de DsfrTabContent) et le sens de l’animation (grâce à la prop asc sur DsfrTabContent).

Utilisation (Script setup TypeScript)

Démo

Code de la démo

<script setup lang="ts">
import { useTabs, DsfrTabs, DsfrTabContent, type DsfrTabsProps } from '../../index'

const { ascendant, selected, select } = useTabs(true, 0)

const tabListName = 'Onglets'

const tabTitles: DsfrTabsProps['tabTitles'] = [
  {
    title: 'Informations générales',
    tabId: 'tab-info-gen',
    panelId: 'panel-info-gen',
  },
  {
    title: 'Document(s)',
    tabId: 'tab-info-gen',
    panelId: 'panel-info-gen',
  },
]
</script>

<template>
  <div class="fr-container fr-my-2w">
    <DsfrTabs
      :tab-list-name="tabListName"
      :tab-titles="tabTitles"
      :initial-selected-index="selected"
      @select-tab="select"
    >
      <DsfrTabContent
        :panel-id="tabTitles[0].panelId"
        :tab-id="tabTitles[0].tabId"
        :selected="selected === 0"
        :asc="ascendant"
      >
        <p>Contenu 1 avec d'autres composants</p>
        <p>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum consequuntur pariatur nesciunt,
          possimus sunt mollitia officiis quam reiciendis. Eaque nulla eos, inventore obcaecati expedita
          velit libero repudiandae exercitationem! Culpa, atque.
        </p>
      </DsfrTabContent>
      <DsfrTabContent
        :panel-id="tabTitles[1].panelId"
        :tab-id="tabTitles[1].tabId"
        :selected="selected === 1"
        :asc="ascendant"
      >
        <p>Contenu 2 avec d'autres composants</p>
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit ipsa, fuga ipsam quae eveniet nam officiis,
          ducimus numquam, officia beatae nobis voluptates quibusdam repudiandae quam facere maiores repellendus nulla nihil.
        </p>
      </DsfrTabContent>
    </DsfrTabs>
  </div>
</template>

useTabs.ts

import { ref } from 'vue'

export const useTabs = (isAscendant = true, initialSelectedIndex = 0) => {
  const ascendant = ref<boolean>(isAscendant)
  const selected = ref<number>(initialSelectedIndex)

  function select (idx: number): void {
    ascendant.value = selected.value < idx
    selected.value = idx
  }

  return { ascendant, selected, select }
}