### File

`projects/commons/src/lib/elements/dropdown/components/dropdown.component.ts`

### Metadata

selector | `cmn-dropdown`
styleUrls | `./dropdown.component.scss`
templateUrl | `./dropdown.component.html`

### Index

###### Properties
Public hasHover
###### Inputs
hasBorder label

### Inputs

hasBorder
Type : `boolean`
Defined in projects/commons/src/lib/elements/dropdown/components/dropdown.component.ts:11

label
Type : `string`
Defined in projects/commons/src/lib/elements/dropdown/components/dropdown.component.ts:10

### Properties

Public hasHover
Type : `boolean`
Defined in projects/commons/src/lib/elements/dropdown/components/dropdown.component.ts:13

    import { Component, Input } from '@angular/core';

    @Component({
        selector: 'cmn-dropdown',
        templateUrl: './dropdown.component.html',
        styleUrls: [ './dropdown.component.scss' ],
    })

    export class DropdownComponent {
        @Input() public readonly label: string;
        @Input() public readonly hasBorder: boolean;

        public hasHover: boolean;
    }

    <div class="dropdown"
         [class.is-active]="hasHover"
         (mouseout)="hasHover = false"
         (mouseover)="hasHover = true">
        <div class="dropdown-trigger">
            <button class="button"
                    aria-haspopup="true"
                    aria-controls="dropdown-menu">
                <span>{{ label }}</span>
                <span class="icon is-small">
                    <i class="fas fa-caret-down"></i>
                </span>
            </button>
        </div>
        <div class="dropdown-menu is-borderless"
             id="dropdown-menu"
             role="menu">
            <div class="dropdown-content">
                <ng-content></ng-content>
            </div>
        </div>
    </div>

`./dropdown.component.scss`

    @import "../../../../assets/styles/settings/_colors";

    :host {
        a {
            .dropdown-item,
            button.dropdown-item {
                &:hover {
                    background-color: $turquoise;
                }
            }
        }
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""