useTabs

Obsolète depuis la v6 !!!

Ce composable ne sert plus depuis la version 6 de VueDsfr. Utiliser v-model sur DsfrTabs à la place, cf. documentation de DsfrTabs.

La démo ne fonctionnant plus avec la v6, elle n’est plus visible sur ce site. Le code de la démo est néanmoins toujours accessible pour ceux qui utilisent encore la v5.

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)

Code de la démo

<script setup lang="ts">
import { DsfrTabContent, DsfrTabs, type DsfrTabsProps, useTabs } 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 }
}