Browser non supportato

Utilizza Google Chrome, Mozilla Firefox, Safari, Edge per navigare il nostro sito a tutta velocità e piena esperienza

Componente Chips

Puoi scegliere tra diverse tipologie di chips:

Chips Link

Orange

Dark Mode

Light Black Mode

Chip with icon

Le chips vengono utilizzate come filtri di ricerca. Quando l'utente clicca su una chip, si cambia pagina per visualizzare i risultati aggiornati in base alla categoria  selezionata.

Come funzionano ?
Vanno inserite all'interno di un chips link menu e non in una section. Per configurare una chip singola, selezionarla e cliccare sull'icona della chiave inglese. Da qui, è possibile configurare diversi parametri:

  • URL: selezionare il percorso della pagina alla quale la chip deve collegarsi. Cliccando sulla chip, l'utente sarà reindirizzato a questa pagina
  • Target: self
  • Tooltip: testo che appare quando l'utente passa il mouse sopra la chip
  • Link text: testo che appare all'interno della chip
  • Chip with icon: attivando questa opzione, è possibile aggiungere un'icona accanto al testo nella chip.
  • Disable chip: se abilitato, rende la chip non cliccabile, facendola apparire grigia.

Infine, è possibile scegliere lo style della chip, che può essere nelle versioni orange o dark.

Field Chips

Su design system FIELD CHIPS, su adobe TABS.

Le field chips vengono utilizzate come filtri di ricerca. Quando l'utente clicca su una field chip, la pagina non viene ricaricata né cambia URL, viene aggiornata solo la scheda con i risultati filtrati in base alla categoria selezionata. 

Come funzionano ?

Il componente non va inserito all'interno di una section e tramite l'icona del pennellino, bisogna selezionare ADD PADDING WHEN NOT IN SECTION (per evitare che, su dispositivi mobili, si verifichino spazi tra le chips e il margine laterale della pagina).
Nel caso in cui ci siano solo due chips o se il testo nelle chips è molto corto bisogna selezionare anche  ADD CENTERED LABELS.

In entrambi i casi, tramite icona del pennellino, va selezionato sempre alla voce "AS CHIP LINK" selezionare "Tranform labels in chips" e scegliere il colore desiderato tra "Add Dark Mode" o "Add Action Light".

Per aggiungere le schede corrispondenti alle chip, utilizzare l'icona della chiave inglese. Ogni volta che si inserisce una scheda, è necessario cliccare su "Add", poi su "Container", e infine inserire il titolo che comparirà nella chip.

Passare da una scheda all'altra cliccare sull'icona dei tre quadratini con la (select panel) e selezionare la scheda desiderata per modificare o aggiungere i componenti.