Affix

Elemento ancorato su schermata durante lo scorrere di una specifica sezione di pagina

Componenti
Utile per
Utilità

Anteprima

Per visualizzare la funzionalità del componente potrebbe essere necessario utilizzare la scrollbar e/o cambiare la dimensione del browser.

Anteprima:

Quando usarlo

Gli affix sono elementi ancorati in una specifica area della schermata per facilitarne la visibilità e l’interazione utente. È utile soprattutto su pagine lunghe e su mobile.

Come usarlo

  • Per elementi come il gli indici di sezione, le azioni principali (pulsanti), i pulsanti di condivisione dei social network.

Attenzione a

  • Non nascondere il contenuto di una pagina sotto un affix.

Buone pratiche sui contenuti

  • In base all’elemento che viene ancorato con un affix (pulsante, menu, icone), valgono le stesse considerazioni di contenuto valide per il componente specifico.

Accessibilità

Lo stato delle verifiche di accessibilità effettuate sul componente Bootstrap Italia

CaratteristicaStatoDescrizione

Visivamente accessibile

Pronto

Uso e contrasto dei colori, leggibilità

Amichevole con lettori di schermo

Pronto

Struttura titolazioni, etichette e testi alternativi

Navigabile

Pronto

Focus, struttura, navigazione da tastiera o altri device

Comprensibile

Pronto

Comprensibile, prevedibile, gestione semplice dell’errore

Apri una issue sul repository Bootstrap Italia

Stato del componente

Lo stato del presente componente nelle diverse librerie di design e sviluppo del design system

LibreriaStato componenteLink

UI Kit Italia (design)

Non presenteKit

Bootstrap Italia

ProntoScheda documentazione

React

Non presenteScheda Storybook

Angular

Non presenteScheda documentazione
Apri una issue sul repository Bootstrap ItaliaApri una issue sul repository UI Kit Italia

Anatomia

Non presente.

Comportamento

Un affix rimane ancorato su schermata mentre si è su una specifica area della pagina. Allo scorrere completo dell’area di pagina, scorrerà anche l’affix. Un affix può avere uno sviluppo verticale o orizzontale e può essere ancorato alla parte alta o alla parte bassa della schermata.

Specifiche di design

Non presenti.

Come iniziare

Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici

Vai alla scheda per designer

Anteprima

Per visualizzare la funzionalità del componente potrebbe essere necessario utilizzare la scrollbar e/o cambiare la dimensione del browser.

Anteprima:

1<div class="affix-example container">
2  <div class="row">
3    <div class="col-6 col-md-3 p-2 affix-parent">
4      <div class="neutral-1-bg-a7 p-3 mb-1">
5        <p class="mb-0 white-color">Lorem ipsum</p>
6      </div>
7      <div class="neutral-1-bg-a7 p-3 mb-1">
8        <p class="mb-0 white-color">Dolor sit</p>
9      </div>
10      <div class="primary-bg p-3 affix-top">
11        <p class="mb-0 white-color">Affix top</p>
12      </div>
13    </div>
14    <div class="col-6 col-md-9 p-2">
15      <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur nulla justo, ullamcorper et pharetra nec, sagittis id augue. Ut imperdiet dolor neque, at imperdiet lectus finibus in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis fringilla nisi sed magna congue ultricies. Nam faucibus lacinia auctor. Morbi eget ullamcorper erat. Donec auctor, nulla non pellentesque vestibulum, nisl nulla iaculis lectus, nec tincidunt elit purus eu leo. Phasellus quis justo consequat, commodo mi pretium, porta turpis.</p>
16      <p class="mb-0 d-none d-md-block">Mauris placerat commodo tincidunt. Mauris finibus hendrerit molestie. Vestibulum gravida, lectus sed semper fringilla, libero felis vehicula quam, at efficitur nisl justo mattis orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla rutrum venenatis tellus, vel suscipit tellus faucibus at. Curabitur varius nisi a erat vulputate aliquet. Vivamus eu purus pretium, porta lacus id, mattis ligula. Phasellus eu aliquam nisi. Nunc dictum in nulla eget porttitor. Mauris dapibus vitae orci id posuere. Cras in mollis tortor. Sed felis turpis, auctor ullamcorper ipsum vel, porta tempor felis. Integer rutrum nulla nisi, quis facilisis ipsum hendrerit non. Aenean at fringilla ipsum. Mauris sodales fermentum magna volutpat imperdiet. Nullam condimentum orci purus, eget vulputate ipsum dapibus sit amet.</p>
17    </div>
18  </div>
19  <div class="row p-2 d-none d-md-block">
20    <p>Mauris placerat commodo tincidunt. Mauris finibus hendrerit molestie. Vestibulum gravida, lectus sed semper fringilla, libero felis vehicula quam, at efficitur nisl justo mattis orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla rutrum venenatis tellus, vel suscipit tellus faucibus at. Curabitur varius nisi a erat vulputate aliquet. Vivamus eu purus pretium, porta lacus id, mattis ligula. Phasellus eu aliquam nisi. Nunc dictum in nulla eget porttitor. Mauris dapibus vitae orci id posuere. Cras in mollis tortor. Sed felis turpis, auctor ullamcorper ipsum vel, porta tempor felis. Integer rutrum nulla nisi, quis facilisis ipsum hendrerit non. Aenean at fringilla ipsum. Mauris sodales fermentum magna volutpat imperdiet. Nullam condimentum orci purus, eget vulputate ipsum dapibus sit amet.</p>
21  </div>
22</div>

Come iniziare

Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici

Vai alla scheda per sviluppatori
Ultimo aggiornamento: Licenza CC BY-SA 4.0
Proponi una modifica a questa pagina