import { Controls, Canvas, Meta, Source } from '@storybook/addon-docs/blocks';
import * as HeaderLoading from './HeaderLoading.stories';

<Meta of={HeaderLoading} />

<div className="header">
  <h1>HeaderLoading</h1>
  <p>L’élément `HeaderLoading` est une extension du composant `VSkeletonLoader` de Vuetify, il est utilisé pour afficher un élément de chargement avec des dimensions personnalisées.</p>
</div>

{/* func-version-start */}
<p className="func-version-badge">Dernière mise à jour fonctionnelle : V1.0.7 - 20/08/2025</p>
{/* func-version-end */}
{/* a11y-version-start */}
<p className="a11y-version-badge">Dernière mise à jour accessibilité : V1.0.20 - 11/02/2026</p>
{/* a11y-version-end */}


<Canvas of={HeaderLoading.Default} />

# API

<Controls of={HeaderLoading.Default} />

# Exemple d'utilisation

<Source dark code={`
<script setup lang="ts">
	import { HeaderLoading } from '@cnamts/synapse'
</script>

<template>
	<div class="pa-4">
		<HeaderLoading width="200px" />
	</div>
</template>
`} />