### File

`packages/components/eui-dimmer/dimmer.component.ts`

### Description

A dimming overlay component that provides a semi-transparent backdrop over page content. Automatically integrates with browser navigation to manage dimmer state during back/forward actions. Commonly used to indicate loading states, modal overlays, or to draw attention to specific UI elements.

### Basic Usage

Example :

    <eui-dimmer [isDimmerActive]="isLoading"></eui-dimmer>

### With Loading State

Example :

    // Component
    isLoading = false;

    loadData(): void {
      this.isLoading = true;
      this.dataService.fetch().subscribe(() => {
        this.isLoading = false;
      });
    }

    // Template
    <eui-dimmer [isDimmerActive]="isLoading"></eui-dimmer>
    <button (click)="loadData()">Load Data</button>

### Accessibility

- Dimmer does not trap focus or block interaction by itself
- Should be combined with modal dialogs or loading indicators for proper accessibility
- Consider adding `aria-busy="true"` to parent container when dimmer is active
- Ensure keyboard users can still navigate when dimmer is visible

### Notes

- Automatically deactivates on browser back button navigation
- Integrates with `EuiAppShellService` for centralized state management
- Does not prevent user interaction - use with modal components for blocking behavior
- Typically placed at root level of application for full-page coverage
- CSS class `eui-dimmer--active` applied when active for custom styling

### Metadata

changeDetection | `ChangeDetectionStrategy.Default`
encapsulation | `ViewEncapsulation.None`
selector | `eui-dimmer`
styleUrls | `./dimmer.scss`

### Index

###### Properties

- asService

###### Inputs

- e2eAttr
- isDimmerActive

###### HostBindings

- class

###### Accessors

- isDimmerActive
- cssClasses

### Constructor

`constructor()`
Creates an instance of EuiDimmerComponent. Listens to router navigation events to handle dimmer state during navigation, particularly when the user navigates back in browser history.

### Inputs

e2eAttr
Type : `string`
Default value : `'eui-dimmer'`
E2E testing attribute for the component.

isDimmerActive
Type : `boolean`
Gets the active state of the dimmer.

### HostBindings

class
Type : `string`
Gets the CSS classes to apply to the host element. Adds the 'eui-dimmer--active' class when the dimmer is active.

### Properties

asService
Type : `unknown`
Default value : `inject(EuiAppShellService)`

### Accessors

isDimmerActive
get `isDimmerActive()`
Gets the active state of the dimmer. Returns : `boolean`
set `isDimmerActive(value: BooleanInput)`

Sets the active state of the dimmer.

Parameters :

Name | Type | Optional | Description

value

`BooleanInput`

No

- The value to set for the dimmer active state.

Returns : `void`

cssClasses
get `cssClasses()`
Gets the CSS classes to apply to the host element. Adds the 'eui-dimmer--active' class when the dimmer is active. Returns : `string`

# results matching ""

# No results matching ""