DropdownHover CORE

    
      
    

      
        Copy
      
      
    
  

    
      <span
    tuiDropdown="Great Scott!"
    tuiDropdownHover
>
    This is heavy!
</span>

    

      
        Copy
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      <tui-tabs [(activeItemIndex)]="index">
    <button
        tuiTab
        type="button"
    >
        Just a tab
    </button>
    <button
        tuiChevron
        tuiDropdownHover
        tuiTab
        type="button"
        [tuiDropdown]="content"
        [(tuiDropdownOpen)]="open"
        (tui-tab-activate.stop)="(0)"
    >
        Hoverable/Clickable
        <ng-template #content>
            <tui-data-list (click)="onClick()">
                <button
                    tuiOption
                    type="button"
                >
                    Option 1
                </button>
                <button
                    tuiOption
                    type="button"
                >
                    Option 2
                </button>
                <button
                    tuiOption
                    type="button"
                >
                    Option 3
                </button>
            </tui-data-list>
        </ng-template>
    </button>
    <button
        tuiTab
        type="button"
    >
        Another tab
    </button>
    <button
        iconStart="@tui.settings"
        title="Open settings"
        tuiDropdownHover
        tuiTab
        type="button"
        [tuiDropdown]="settings"
        [(tuiDropdownOpen)]="openSettings"
        (tui-tab-activate.stop)="(0)"
    ></button>
    <ng-template #settings>
        <div
            class="settings"
            [formGroup]="form"
        >
            <input
                formControlName="option"
                tuiSwitch
                type="checkbox"
            />
            Turn option
        </div>
    </ng-template>
</tui-tabs>
<p>Current state: {{ open ? 'open' : 'closed' }}</p>

    

      
        Copy
      
      
    
  

    
      .settings {
    margin: 1rem;
}

    

      
        Copy
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      <button
    tuiButton
    tuiDropdownHover
    type="button"
    [tuiDropdown]="dropdown"
    [(tuiDropdownOpen)]="open"
>
    Dropdown hover
    <ng-template #dropdown>
        <div [style.padding]="'0 1rem'">
            <tui-textfield
                tuiChevron
                class="margin"
                [tuiTextfieldCleaner]="false"
            >
                <label tuiLabel>Nested select</label>

                <input
                    tuiSelect
                    [formControl]="selected"
                />

                <tui-data-list-wrapper
                    *tuiDropdown
                    [items]="selectItems"
                />
            </tui-textfield>

            <p>
                <button
                    size="s"
                    tuiButton
                    tuiDropdownAuto
                    tuiDropdownHover
                    type="button"
                    [tuiDropdown]="content"
                >
                    Nested dropdown hover
                </button>
                <ng-template #content>
                    <p class="tui-space_horizontal-2">Nested content!</p>
                </ng-template>
            </p>
        </div>

        <tui-data-list>
            @for (item of items; track item) {
                <button
                    tuiOption
                    type="button"
                >
                    {{ item }}
                </button>
            }
        </tui-data-list>
    </ng-template>
</button>

    

      
        Copy
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      <div
    tuiDropdown="Dropdown content"
    tuiDropdownAuto
    tuiDropdownHover
    tuiDropdownLimitWidth="fixed"
    tuiGroup
>
    <button
        tuiButton
        type="button"
    >
        Won't open here
    </button>
    <button
        #tuiDropdownHost
        tuiButton
        type="button"
    >
        Will open here
    </button>
</div>

    

      
        Copy
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      <button
    appearance="outline-grayscale"
    iconStart="@tui.ellipsis"
    tuiDropdownHover
    tuiDropdownSheet="Contact Us"
    tuiIconButton
    type="button"
    [tuiDropdown]="dropdown"
>
    More
</button>

<ng-template #dropdown>
    <tui-data-list>
        <a
            href="https://github.com/taiga-family/taiga-ui"
            iconStart="assets/icons/github.svg"
            rel="noreferrer"
            target="_blank"
            tuiOption
        >
            GitHub
        </a>
        <a
            href="https://t.me/taiga_ui"
            iconStart="assets/icons/telegram.svg"
            rel="noreferrer"
            target="_blank"
            tuiOption
        >
            Telegram
        </a>
        <a
            href="https://discord.gg/zrB2EdJjEy"
            iconStart="assets/icons/discord.svg"
            rel="noreferrer"
            target="_blank"
            tuiOption
        >
            Discord
        </a>
    </tui-data-list>
</ng-template>

    

      
        Copy