Dropdown Implementation

Dropdowns are interactive UI elements that display a list of actions or options when triggered. This documentation demonstrates how to implement a dropdown using Angular with the `DomixDropdownModule`.

HTML Template

Use a button to toggle the dropdown visibility and define the dropdown menu:

<button domixDropdownToggle [dropdownMenu]="dropdown1" type="button">
    Open Dropdown
</button>

<div #dropdown1 class="!fixed p-2 dropdown-menu hidden" dropdown-position="right">
  //  
</div>

TypeScript Logic

Ensure the `DomixDropdownModule` is imported into your component. Below is the TypeScript setup:

// src/app/index.component.ts
import { Component } from '@angular/core';
import { DomixDropdownModule } from './domix-dropdown.module'; // Import the module

@Component({
    selector: 'app-index',
    standalone: true,
    imports: [DomixDropdownModule], // Import the dropdown module
    templateUrl: './index.component.html',
})
export class IndexComponent {
    // Add any additional logic if needed
}

Dropdown Toggle Directive

The `domixDropdownToggle` directive is used to toggle the visibility of the dropdown menu. The `dropdownMenu` attribute links the button with the dropdown content.

Dropdown Positioning

You can control the position of the dropdown using the `dropdown-position` attribute. In this example, the dropdown is positioned to the right:

<div #dropdown1 class="dropdown-menu" dropdown-position="right">
    <!-- Dropdown content goes here -->
</div>

Styling the Dropdown

Customize the appearance of the dropdown using CSS. For example, you can hide the dropdown by default with the `hidden` class and show it on toggle.

.dropdown-menu {
    transition: opacity 0.3s ease;
}
.hidden {
    display: none;
}

This setup demonstrates how to implement a dynamic dropdown using the `DomixDropdownModule`. Customize the behavior and styling to fit your application's needs.