Dropdown

[giuseppe-santoro]

Comportamento atteso

Realizzare le componenti necessarie per l'utilizzo di un dropdown con lo stile di di Design UI Kit.

Dropdown Bootstrap Italia

Possibili soluzioni

Creare delle componenti Angular che rispecchino l'esempio di utilizzo seguente:

<it-dropdown 
      [color]="color"
      [label]="label"
      [dark]="isDark"
      [fullWidth]="isFullWidth" 
      [isOpen]="isOpen"
      (onOpen)="doSomething()"
      (onClose)="doSomething()" 
      (onToggle)="doSomething()">
  <it-dropdown-header>Header 1</it-dropdown-header>
  <it-dropdown-item *ngFor="let item of items"
      [link]="item.link"
      [active]="item.active"
      [disabled]="item.disabled"
      [large]="item.large"
      [icon]="item.icon"
      [iconPosition]="item.iconPosition">{{item.text}}</it-dropdown-item>
  <it-dropdown-divider />
  <it-dropdown-item link="www.google.com">Google</it-dropdown-item>
</it-dropdown>

La componente <it-dropdown> funge da contenitore e può contenere un qualsiasi numero delle altre componenti <it-dropdown-header>, <it-dropdown-item> e <it-dropdown-divider>.

I suoi parametri sono i seguenti:

• color (opzionale, default null) il colore del pulsante che attiva il dropdown. Può assumere i valori primary, secondary, danger, warning, info, warning, success, light e dark
• label il testo presente sul pulsante che attiva il dropdown
• dark (opzionale, default false) se presente indica che il dropdown utilizza il tema di colorazione scura. Accetta una espressione booleana o può essere usato come attributo senza valore
• fullWidth (opzionale, default false) se presente indica che le voci del dropdown si sviluppano orizzontalmente. Accetta una espressione booleana o può essere usato come attributo senza valore
• isOpen (opzionale, default false) indica se il dropdown è aperto. Accetta una espressione booleana

La componente <it-dropdown-item> rappresenta il singolo elemento link del dropdown.

I suoi parametri sono i seguenti:

• link il link alla pagina verso cui andare al click sull'elemento del dropdown
• active (opzionale, default false) se presente indica che l'elemento viene renderizzato come elemento attivo. Accetta una espressione booleana o può essere usato come attributo senza valore
• disabled (opzionale, default false) se presente indica che l'elemento è disabilitato. Accetta una espressione booleana o può essere usato come attributo senza valore
• large (opzionale, default false) se presente indica che il testo dell'elemento viene renderizzato più grande. Accetta una espressione booleana o può essere usato come attributo senza valore
• icon (opzionale, default null) la classe dell'icona da usare prima o dopo del testo dell'elemento del dropdown
• iconPosition: (opzionale, default right) la posizione dell'icona rispetto al testo dell'elemento del dropdown. Può assumere valori right o left.

La componente <it-dropdown-header> rappresenta una sezione di intestazione nel dropdown e contiene il testo da mostrare come intestazione.

La componente <it-dropdown-divider> rappresenta un separatore tra le varie sezioni del dropdown.

Eventi

• onOpen: evento che viene lanciato ogni volta che il dropdown viene aperto
• onClose: evento che viene lanciato ogni volta che il dropdown viene chiuso
• onToggle: evento che viene lanciato ogni volta che il dropdown viene aperto oppure chiuso