diff --git a/stories/Components/Tab.stories.tsx b/stories/Components/Tab.stories.tsx index 98f1b5556..132cdd618 100644 --- a/stories/Components/Tab.stories.tsx +++ b/stories/Components/Tab.stories.tsx @@ -1,6 +1,6 @@ import { Meta, StoryObj } from '@storybook/react'; import React from 'react'; -import { Icon, TabContainer, TabContent, TabNav, TabNavItem, TabNavLink, TabPane } from '../../src'; +import { Col, Icon, Row, TabContainer, TabContent, TabNav, TabNavItem, TabNavLink, TabPane } from '../../src'; const meta: Meta = { title: 'Documentazione/Componenti/Tab', @@ -515,3 +515,537 @@ export const TestoIconaPannel: Story = { ) }; + +export const TestualePannelVertical: Story = { + render: () => ( + + + + + + Attivo + + + Link + + + Link + + + + Disattivo + + + + + + + + Contenuto 1 + + + Contenuto 2 + + + Contenuto 3 + + + Contenuto 4 + + + + + + ) +}; + +export const TestualePannelVerticalBackground: Story = { + render: () => ( + + + + + + Attivo + + + Link + + + Link + + + + Disattivo + + + + + + + + Contenuto 1 + + + Contenuto 2 + + + Contenuto 3 + + + Contenuto 4 + + + + + + ) +}; + +export const TestoIconaPannelVertical: Story = { + render: () => ( + + + + + + + Tab 1 + + + + + + Tab 2 + + + + + + Tab 3 + + + + + + Tab 4 + + + + + + + + + Contenuto 1 + + + Contenuto 2 + + + Contenuto 3 + + + Contenuto 4 + + + + + + ) +}; + +export const TestoPannelVertical: Story = { + render: () => ( + + + + + + + Tab 1 + + + + + + Tab 2 + + + + + + Tab 3 + + + + + + Tab 4 + + + + + + + + + Contenuto 1 + + + Contenuto 2 + + + Contenuto 3 + + + Contenuto 4 + + + + + + ) +}; + +export const TestualePannelReverseBottom: Story = { + render: () => ( + +
+ + + Attivo + + + Link + + + Link + + + + Disattivo + + + + + + Contenuto 1 + + + Contenuto 2 + + + Contenuto 3 + + + Contenuto 4 + + +
+ + ) +}; + +export const TestualePannelReverseRight: Story = { + render: () => ( + + + + + + Attivo + + + Link + + + Link + + + + Disattivo + + + + + + + + Contenuto 1 + + + Contenuto 2 + + + Contenuto 3 + + + Contenuto 4 + + + + + + ) +}; + +export const TestualeFullDark: Story = { + render: () => ( + + + + Attivo + + + Link + + + Link + + + + Disattivo + + + + + ) +}; + +export const TestoIconaFullDark: Story = { + render: () => ( + + + + + + Tab 1 + + + + + + Tab 2 + + + + + + Tab 3 + + + + + + Tab 4 + + + + + ) +}; + +export const TestoIconaPannelVerticalDark: Story = { + render: () => ( + + + + + + + Tab 1 + + + + + + Tab 2 + + + + + + Tab 3 + + + + + + Tab 4 + + + + + + + + + Contenuto 1 + + + Contenuto 2 + + + Contenuto 3 + + + Contenuto 4 + + + + + + ) +}; + +export const TestualePannelReverseRightDark: Story = { + render: () => ( + + + + + + + + Tab 1 + + + + + + Tab 2 + + + + + + Tab 3 + + + + + + Tab 4 + + + + + + + + Contenuto 1 + + + Contenuto 2 + + + Contenuto 3 + + + Contenuto 4 + + + + + + ) +}; + +export const TestualePannelCard: Story = { + render: () => ( + + + + Attivo + + + Link + + + Link + + + + Disattivo + + + + + + Contenuto 1 + + + Contenuto 2 + + + Contenuto 3 + + + Contenuto 4 + + + + ) +}; + +export const TestualePannelCardEditable: Story = { + render: () => ( + +
+ + + Tab 1 +
+ + Chiudi tab 1 +
+ + + Tab 2 +
+ + Chiudi tab 2 +
+ + + Tab 3 +
+ + Chiudi tab 3 +
+ + + + Disattivo + +
+ + Chiudi tab 4 +
+ +
  • + + + Aggiungi un tab + + +     +
    + + + Contenuto 1 + + + Contenuto 2 + + + Contenuto 3 + + + Contenuto 4 + + +     + ) +}; diff --git a/stories/Documentation/Tab.mdx b/stories/Documentation/Tab.mdx index d87258f8d..ea3ff986a 100644 --- a/stories/Documentation/Tab.mdx +++ b/stories/Documentation/Tab.mdx @@ -125,3 +125,71 @@ Gli esempi sopra riportati non hanno molto senso senza un contenuto che cambi al ### Tab con testo e icona + +## Tab verticali + +Impostando il parametro `vertical` al componente `TabNav` e aggiungendo i dovuti componenti per la spaziatura verticale, è possibile realizzare tab a orientamento verticale. + +### Tab testuale + + + +### Tab testuale con colore di sfondo + +Aggiungendo la classe `.nav-tabs-vertical-background` al componente `TabNav` contenitore dei link i tab selezionati avranno un colore di sfondo. + + + +### Tab con testo e icona + + + +### Tab con icona + +Le label dei Tab possono essere sostituite da icone, avendo cura di includere all’interno del link un elemento `` contenente la descrizione per non gli screen reader del tab con classe `.visually-hidden` per nascondere la descrizione agli altri browser. Al componente `TabNavLink` contenente l’icona va aggiunta la classe `.justify-content-end` per allineare l’icona a destra. + + + +## Posizione dei Tab + +Per questioni di accessibilità è preferibile utilizzare le proprietà Flex di CSS a un cambio di posizione dei Tab nell’HTML. Per garantire un flusso di lettura naturale della pagina i tab di navigazione devono precedere il contenuto a loro associato. + +### Orizzontale in fondo + +Per posizionare i tab al di sotto del contenuto è necessario utilizzare un elemento contenitore (ad esempio un `
    `) con classi `.d-flex .flex-column-reverse`. + + + +### Verticale a destra + +Per posizionare i tab verticali a destra contenuto è necessario applicare la classe `.flex-row-reverse` all’elemento con classe `.row` che li contiene. + + + +## Tab con sfondo scuro + +### Tab orizzontali a tutta larghezza + + + +### Tab con testo e icona + + + +### Tab verticali + + + +### Tab verticali destra + + + +## Tab tipo Card + +Aggiungere la proprietà `card` al componente `TabNav` per ottenere un design tipo card. + + + +### Tab tipo Card con pulsanti aggiungi/elimina + +