Composant Tabs, Pills et Accordion Angular | ng-hub-ui-panels
Composant de panneaux de contenu Angular qui se rend sous forme de tabs, pills ou accordion, avec routing, formulaires réactifs, navigation au clavier et variables CSS.
Référence API
Voici le contrat complet de panels : tout ce que vous pouvez lier, écouter, projeter et personnaliser, réuni au même endroit. Branchez ce dont vous avez besoin et stylisez ce que vous voulez — c’est standalone et compatible avec les signals.
Inputs
Réglez panels à votre goût avec 20 inputs. Liez-les comme n’importe quel @Input Angular.
| Nom | Type | Par défaut | Description |
|---|---|---|---|
type | 'tabs' | 'pills' | 'accordion' | 'card' | 'tabs' | Visualisation du conteneur : tabs soulignés, pills arrondis ou panneaux accordion empilés. |
vertical | boolean | false | Empile la barre d'en-têtes verticalement à côté du contenu (vues tabs / pills). |
justified | boolean | false | Étire les en-têtes pour partager équitablement la largeur disponible. |
scrollable | boolean | false | Ajoute des boutons de défilement arrière/avant lorsque la barre d'en-têtes déborde. |
isKeysAllowed | boolean | true | Active la navigation au clavier (flèches / Home / End / Delete). |
multiple | boolean | false | Permet à plusieurs panneaux d'être actifs en même temps. Dans la vue accordion, ils se déploient tous ; dans les vues tabs/pills, chaque en-tête actif démarre un bloc de panneau visible et les en-têtes inactifs suivants restent groupés au-dessus de ce bloc jusqu'à ce que l'en-tête actif suivant en démarre un nouveau. La valeur du formulaire devient un tableau. |
flush | boolean | false | Vue accordion : panneaux bord à bord sans bordures ni rayon extérieurs. |
bindValue | string | undefined | Chemin en notation pointée appliqué à la valeur de chaque panneau pour obtenir la valeur de formulaire émise (par ex. 'meta.key'). |
compareWith | (a: unknown, b: unknown) => boolean | (a, b) => a === b | Égalité utilisée pour faire correspondre les valeurs de formulaire aux valeurs des panneaux. |
heading | string | undefined | hub-panel : en-tête en texte brut. Ignoré lorsqu'un modèle hubPanelHeading est fourni. |
appearance | 'card' | 'alert' | 'card' | hub-panel : apparence d'un panneau autonome — 'card' (par défaut) ou une alerte sémantique 'alert'. Ignoré dans les vues onglets/pills/accordéon. |
variant | 'primary' | 'success' | 'danger' | 'warning' | 'info' | undefined | hub-panel : couleur sémantique d'une alerte ('primary' | 'success' | 'danger' | 'warning' | 'info'). À omettre pour une alerte neutre. |
value | unknown | id | hub-panel : valeur contribuée lorsque le conteneur est utilisé comme contrôle de formulaire. |
active | boolean (model) | false | hub-panel : état active/expanded lié de manière bidirectionnelle. |
disabled | boolean | false | hub-panel : empêche l'activation du panneau. |
removable | boolean | false | hub-panel : affiche une affordance ✕ et permet la suppression avec la touche Delete. |
routerLink | string | string[] | undefined | hub-panel : transforme le panneau en panneau routé adossé à un <router-outlet>. |
queryParams | Params | undefined | hub-panel : paramètres de requête ajoutés lors de la navigation vers routerLink. |
pathMatch | 'route' | 'full' | 'route' | hub-panel : comparaison d'URL utilisée pour marquer un panneau routé comme actif. |
customClass | string | undefined | hub-panel : classes CSS supplémentaires appliquées à la fois à l'élément de nav et au volet. |
Outputs
Réagissez à ce que fait panels — 4 événements sur lesquels accrocher votre logique.
| Nom | Type | Description |
|---|---|---|
panelChange | EventEmitter<PanelChangeEvent> | hub-panels : émis lorsque l'utilisateur active (ouvre) un panneau différent. Fournit { current, prev }. |
selectPanel | EventEmitter<PanelComponent> | hub-panel : émis lorsque le panneau devient actif. |
deselectPanel | EventEmitter<PanelComponent> | hub-panel : émis lorsque le panneau cesse d'être actif. |
removed | EventEmitter<PanelComponent> | hub-panel : émis lorsque le panneau est supprimé via le bouton ✕ ou la touche Delete. |
Templates
Faites-le vôtre — 3 emplacements de template vous permettent de projeter votre propre balisage.
| Nom | Description | Exemple |
|---|---|---|
hubPanelHeading | Marque un <ng-template> à l'intérieur d'un hub-panel comme en-tête personnalisé de ce panneau (lien de barre dans tabs/pills, bouton de divulgation dans accordion), remplaçant l'input d'en-tête en texte brut. | <hub-panel>
<ng-template hubPanelHeading>
<i class="fa-solid fa-gear"></i> Settings <span class="badge text-bg-primary">3</span>
</ng-template>
Panel content
</hub-panel> |
hubPanelHeader / hubPanelFooter | Marque un élément à l’intérieur d’un hub-panel comme bande d’en-tête/pied de contenu du panneau. S’affiche dans toutes les vues (tabs, pills, accordion, card), distinct de hubPanelHeading. | <hub-panel>
<div hubPanelHeader>Card title</div>
Card content
<div hubPanelFooter>Actions</div>
</hub-panel> |
type="card" | La visualisation en carte sans habillage : pas de barre de navigation, tous les panneaux toujours visibles. Un hub-panel peut aussi être utilisé seul, en dehors de tout hub-panels, où il s’affiche comme une carte. | <hub-panels type="card">
<hub-panel>…</hub-panel>
<hub-panel>…</hub-panel>
</hub-panels> |
Variables CSS
Personnalisez chaque pixel avec 36 variables CSS. Remplacez-les au niveau de :root ou limitez-les à un conteneur.
Mise en page et bordures
Structure globale du conteneur : direction de la bande, rembourrage du contenu et tokens de bordure partagés.
| Variable | Par défaut | Type | Description |
|---|---|---|---|
--hub-panels-flex-direction | row | string | Direction de la bande d'en-tête par rapport au contenu. rowrow-reverse |
--hub-panels-border-width | 1px | length | Largeur de bordure utilisée par la bande d'onglets et l'onglet actif. 02px |
--hub-panels-border-color | #dee2e6 | color | Couleur de la bordure de la bande d'onglets et du contenu. #ced4davar(--bs-border-color) |
--hub-panels-border-radius | 0.375rem | length | Rayon des coins des en-têtes d'onglets et du contenu. 00.5rem |
--hub-panels-content-bg | #fff | color | Arrière-plan de la zone de contenu. transparent#f8f9fa |
--hub-panels-header-bg | var(--hub-panels-content-bg) | color | Arrière-plan de la zone de la bande tabs/pills derrière les en-têtes inactifs et les zones d'espacement. #f8f9favar(--bs-tertiary-bg) |
--hub-panels-content-box-shadow | none | shadow | Ombre portée appliquée au conteneur de la zone de contenu. none0 0.5rem 1rem rgba(0,0,0,.08) |
--hub-panels-content-padding-x | 1rem | length | Rembourrage horizontal de la zone de contenu. 0.75rem1.5rem |
--hub-panels-content-padding-y | 1rem | length | Rembourrage vertical de la zone de contenu. 0.75rem1.5rem |
En-têtes d'onglets
Typographie, espacement et états de couleur des en-têtes tab/pill individuels.
| Variable | Par défaut | Type | Description |
|---|---|---|---|
--hub-panels-tab-font-weight | 500 | number | Graisse de police du libellé de l'en-tête. 400600 |
--hub-panels-tab-padding-x | 1rem | length | Rembourrage horizontal à l'intérieur d'un en-tête. 0.75rem1.25rem |
--hub-panels-tab-padding-y | 0.5rem | length | Rembourrage vertical à l'intérieur d'un en-tête. 0.375rem0.75rem |
--hub-panels-tab-color | #212529 | color | Couleur du texte d'un en-tête inactif. #495057var(--bs-body-color) |
--hub-panels-tab-bg | transparent | color | Arrière-plan d'un en-tête inactif ; laissez-le transparent pour laisser apparaître `--hub-panels-header-bg`. transparent#f8f9fa |
--hub-panels-tab-color-active | #0d6efd | color | Couleur du texte de l'en-tête actif. var(--bs-primary)#0b5ed7 |
--hub-panels-tab-bg-active | #fff | color | Arrière-plan de l'en-tête actif ; par défaut la surface du contenu, afin que l'onglet actif fusionne avec le panneau. var(--bs-primary)var(--hub-panels-content-bg) |
--hub-panels-tab-bg-hover | #f8f9fa | color | Arrière-plan d'un en-tête au survol. #e9eceftransparent |
--hub-panels-tab-border-color-active | #0d6efd | color | Couleur de la bordure de l'onglet actif. var(--bs-primary)#0b5ed7 |
--hub-panels-tab-active-shadow | 0 -0.25rem 0.5rem rgba(0, 0, 0, 0.06) | shadow | Ombre d'élévation utilisée par l'onglet actif dans la vue tabs encadrés horizontale. none0 -0.25rem 0.75rem rgba(0,0,0,.12) |
--hub-panels-tab-active-shadow-vertical | -0.25rem 0 0.5rem rgba(0, 0, 0, 0.06) | shadow | Ombre d'élévation utilisée par l'onglet actif dans la vue tabs encadrés verticale. none-0.25rem 0 0.75rem rgba(0,0,0,.12) |
--hub-panels-tab-focus-ring-color | rgba(13, 110, 253, 0.25) | color | Couleur de l'anneau de focus pour le focus clavier. rgba(13,110,253,.4) |
Pills
Tokens spécifiques à la visualisation pills.
| Variable | Par défaut | Type | Description |
|---|---|---|---|
--hub-panels-pill-border-radius | 50rem | length | Rayon des coins des en-têtes pill. 0.5rem999px |
--hub-panels-pill-bg-active | #0d6efd | color | Arrière-plan du pill actif. var(--bs-primary)#198754 |
--hub-panels-pill-color-active | #fff | color | Couleur du texte du pill actif. #fff#000 |
--hub-panels-pill-gap | 0.5rem | length | Espace entre les en-têtes pill. 0.25rem0.75rem |
--hub-panels-pill-content-border-width | 0 | length | Largeur de bordure de la carte de contenu des pills ; réglez-la sur la largeur de bordure partagée pour restaurer un volet bordé. 01px |
--hub-panels-nav-content-gap | 1rem | length | Espace entre la bande des pills et la carte de contenu (espace en ligne en mode vertical). 0.75rem1.5rem |
Sélection multiple
Mise en page de la vue multiple par blocs lorsque les styles tabs/pills autorisent plusieurs en-têtes actifs à la fois.
| Variable | Par défaut | Type | Description |
|---|---|---|---|
--hub-panels-pane-min-width | 16rem | length | Largeur minimale de chaque volet ouvert avant que la zone de contenu ne défile horizontalement. 12rem20rem |
--hub-panels-pane-min-height | 8rem | length | Hauteur minimale de chaque volet ouvert dans la mise en page verticale. 6rem12rem |
--hub-panels-pane-gap | 0 | length | Espace entre les blocs de panneaux multiples. 01rem |
Vue accordion
Tokens pour la visualisation accordion. Chacun se rabat sur la variable `--hub-accordion-*` correspondante pour la compatibilité des thèmes.
| Variable | Par défaut | Type | Description |
|---|---|---|---|
--hub-panels-accordion-active-color | #0c63e4 | color | Couleur du texte d'un en-tête d'accordion déployé. var(--bs-primary) |
--hub-panels-accordion-active-bg | #e7f1ff | color | Arrière-plan d'un en-tête d'accordion déployé. var(--bs-primary-bg-subtle) |
--hub-panels-accordion-btn-padding-x | 1.25rem | length | Rembourrage horizontal du bouton de divulgation. 1rem1.5rem |
--hub-panels-accordion-btn-padding-y | 1rem | length | Rembourrage vertical du bouton de divulgation. 0.75rem1.25rem |
--hub-panels-accordion-btn-icon-transform | rotate(-180deg) | string | Transformation appliquée au chevron lorsqu'il est déployé. rotate(180deg)scaleY(-1) |
--hub-panels-accordion-collapse-transition-duration | 0.25s | transition | Durée de l'animation de déploiement/repli. 0.2s0.35s |
Styles et theming
Aucun exemple de style n’est encore documenté. Cette section inclura des recettes de personnalisation et des exemples de theming.